什么是 MVVM ？
课堂笔记
什么是 MVVM ？
MVVM 是一种架构模式，它最初是由微软的两位工程师在 2005 年的时候所提出的。
- Model：Model代表的是你的数据
- View：视图，直接和用户打交道的
- ViewModel：ViewModel 是 View 和 Model 之间的桥梁。View 和 ViewModel 之间会进行一个数据的绑定。当用户在 View 中进行操作的时候，ViewModel 会去更新 Model 的状态。同理，当 Model 数据发生改变的时候，ViewModel 也会通知 View，让 View 自动显示最新的内容。
MVVM 最早期并非是用于前端的，但是随着前端的火热，慢慢也引入了这种架构模式。
需要说一下，Vue、React 这些现代框架并非第一批使用 MVVM 架构模式的框架，在此之前还有 knockout.js 以及 ember.js。
这里要强调一下，Vue 是 MVVM 架构模式。但是 React 并非 MVVM 架构模式。
在 Vue 中，有明确的哪个部分是 M，哪个部分是 V，哪个部分是 VM。
在 React 里面，没有明确的 VM 部分，采用的是 Flux 的架构模式，是单向数据流。
作为现代前端框架，有如下 4 个共有的特点：
- 状态管理
- 支持组件化开发
- 有配套的前端路由库
- 有配套的状态管理库
接下来我们来重点对比一下 Vue 和 React 这两个框架的异同。
- 视图描述
Vue 使用的是模板进行描述
React 使用的是 JSX 进行描述
不同的描述方式体现了两个团队不同的设计哲学。
React团队认为，UI（HTML）本质上和逻辑（JS）存在耦合部分。作为前端开发工程师，JS 是用得最多的，因此它们考虑屏蔽 HTML，全部使用 JS 来描述 UI，这样子就可以让 UI 和 逻辑配合更紧密。因此他们设计出了 JSX
出发的角度是从前端出发的。
而模板刚好相反，是从后端的角度出发的。本质上是扩展了 HTML，在 HTML 中加入了相关逻辑的语法。
总结一下：
- JSX 的出发点：既然前端使用 JS描述逻辑，就扩展 JS 语法，让它能够描述 UI。
- 前端模板的出发点，前端框架使用 HTML 来描述 UI，那就扩展 HTML 语法，让它能够书写一定的逻辑
- 虚拟 DOM
关于虚拟 DOM，React 团队官方的定时是描述真实 DOM 的一种方式。虚拟 DOM 是一种理念，实现的方式可以是多种多样的，只要你能够通过一种方式来描述真实 DOM，那么就是虚拟 DOM 的一种实现方案。
一说到虚拟 DOM，有人就会误认为虚拟 DOM 一定比原生操作 DOM 快，这种认识也是错的。
假设我就是单纯的创建一个 DOM：
let newP = document.createElement("p");
document.body.appendChild(newP);
这里的话，原生 DOM 的方式一定是比虚拟 DOM 更快的。因为即便是虚拟 DOM，最终也是要去操作真实的 DOM。
根据 React 团队的研究，大家平时在操作 DOM 的时候，比起使用原生的 API 去操作 DOM，更喜欢使用 innerHTML
document.body.innerHTML = `<p>asdasdasd</p>
`
那么此时，使用 innerHTML 就涉及到两个层面的计算
- JS 层面：解析字符串
- DOM 层面：创建对应的 DOM 节点
| innerHTML | 虚拟DOM | |
|---|---|---|
| JS层面 | 解析字符串 | 创建JS对象 |
| DOM层面 | 创建对应的DOM节点 | 创建对应的DOM节点 |
因此可以看出，在第一次创建 DOM 节点的时候，虚拟 DOM 和传统的 innerHTML 的方式，至少都有两个层面的计算。
虚拟 DOM 真正发挥威力的时候，是在更新的时候。innerHTML 需要重新赋值，重新赋值意味着之前创建的 DOM 节点全部销毁。但是虚拟 DOM 会通过 diff 算法只更新必要的 DOM 节点
| innerHTML | 虚拟DOM | |
|---|---|---|
| JS层面 | 解析字符串 | 创建JS对象 |
| DOM层面 | 销毁原来所有的DOM | 修改必要的DOM节点 |
| DOM层面 | 创建对应的DOM节点 |
虚拟 DOM 还有一个好处？
多平台渲染的抽象能力。虚拟 DOM 可以对接不同的宿主环境，实现一个框架，多端渲染。
-
React 为什么要从以前的 Stack 架构改为 Fiber 架构 ？
-
Vue 是否需要 Fiber 架构 ？
要想把这两个问题搞清楚，首先需要搞清楚 Vue 和 React 设计上面的区别。
React 是否是响应式？Vue 是否是响应式 ？
React 不是响应式设计，而 Vue 是响应式设计，这意味 React 中当状态发生改变后，React 不知道是哪个改变了，需要通过 diff 算法计算后才知道。而 Vue 是响应式的，意味着一旦有数据发生变化，Vue 是知道的。
正因为这两种选择的不同，导致了两种框架在后面的发展中产生了巨大的区别。
React 这种设计，每次需要计算整颗虚拟 DOM，这个是属于 JS 层面的计算，虽然速度很快，但是一旦你的虚拟 DOM 数的体量很大，还是会消耗很长的时间。这意味浏览器本来要绘制下一帧了，但是你还在执行 JS，又不能打断。
从 React16 开始，官方引入了 Fiber 的概念，使用链表的方式来描述 UI，之所以采用链表，是因为中途能够打断。
官方两种架构的对比示例：https://claudiopro.github.io/react-fiber-vs-stack-demo/
Vue 不需要 Fiber 架构。因为 Vue 不存在像 React 一样要计算整颗虚拟 DOM 树这种要消耗大量时间的计算。Vue 是响应式的，Vue 本身也遇到了自身的瓶颈，那就是 watcher 太多了。
Vue 的解决方案就是引入虚拟 DOM，将虚拟 DOM 和响应式结合了起来，也就是改变了响应式的粒度。