什么是 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 这两个框架的异同。

1. 视图描述

Vue 使用的是模板进行描述
React 使用的是 JSX 进行描述

不同的描述方式体现了两个团队不同的设计哲学。

React团队认为，UI（HTML）本质上和逻辑（JS）存在耦合部分。作为前端开发工程师，JS 是用得最多的，因此它们考虑屏蔽 HTML，全部使用 JS 来描述 UI，这样子就可以让 UI 和 逻辑配合更紧密。因此他们设计出了 JSX
出发的角度是从前端出发的。

而模板刚好相反，是从后端的角度出发的。本质上是扩展了 HTML，在 HTML 中加入了相关逻辑的语法。

总结一下：

• JSX 的出发点：既然前端使用 JS描述逻辑，就扩展 JS 语法，让它能够描述 UI。
• 前端模板的出发点，前端框架使用 HTML 来描述 UI，那就扩展 HTML 语法，让它能够书写一定的逻辑

2. 虚拟 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 可以对接不同的宿主环境，实现一个框架，多端渲染。

1. React 为什么要从以前的 Stack 架构改为 Fiber 架构 ？

2. 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 和响应式结合了起来，也就是改变了响应式的粒度。