【前端框架】前端框架对比
框架模式
MVVM 架构
M(model)V(view)VM(viewModel)，MVVM 架构是 MVC 架构的改良版本。
MVC 架构下视图与逻辑分离但是数据与视图的映射逻辑需要自己处理，比如用 js + html 写一个列表，需要拿到列表数据，用列表数据生成 dom，然后将 dom 放到页面中。
MVVM 架构中将根据数据生成 dom 的操作交给框架去处理，前端只需要拿到列表数据，然后将列表数据按照框架的规则与 dom 关联即可。
MVVM vs. Virtual DOM
以下内容来自：问题【网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？】中【尤雨溪】的回答
相比起 React，其他 MVVM 系框架比如 Angular, Knockout 以及 Vue、Avalon 采用的都是数据绑定：通过 Directive/Binding 对象，观察数据变化并保留对实际 DOM 元素的引用，当有数据变化时进行对应的操作。
MVVM 的变化检查是数据层面的，而 React 的检查是 DOM 结构层面的。
MVVM 的性能也根据变动检测的实现原理有所不同：Angular 的脏检查使得任何变动都有固定的 O(watcher count) 的代价；Knockout/Vue/Avalon 都采用了依赖收集，在 js 和 DOM 层面都是 O(change)：
- 脏检查：scope digest O(watcher count) + 必要 DOM 更新 O(DOM change)
- 依赖收集：重新收集依赖 O(data change) + 必要 DOM 更新 O(DOM change)
可以看到，Angular 最不效率的地方在于任何小变动都有和 watcher 数量相关的性能代价。但是！当所有数据都变了的时候，Angular 其实并不吃亏。依赖收集在初始化和数据变化的时候都需要重新收集依赖，这个代价在小量更新的时候几乎可以忽略，但在数据量庞大的时候也会产生一定的消耗。
MVVM 渲染列表的时候，由于每一行都有自己的数据作用域，所以通常都是每一行有一个对应的 ViewModel 实例，或者是一个稍微轻量一些的利用原型继承的 "scope" 对象，但也有一定的代价。所以，MVVM 列表渲染的初始化几乎一定比 React 慢，因为创建 ViewModel / scope 实例比起 Virtual DOM 来说要昂贵很多。
这里所有 MVVM 实现的一个共同问题就是在列表渲染的数据源变动时，尤其是当数据是全新的对象时，如何有效地复用已经创建的 ViewModel 实例和 DOM 元素。假如没有任何复用方面的优化，由于数据是 “全新” 的，MVVM 实际上需要销毁之前的所有实例，重新创建所有实例，最后再进行一次渲染！
相比之下，React 的变动检查由于是 DOM 结构层面的，即使是全新的数据，只要最后渲染结果没变，那么就不需要做无用功。
不要天真地以为 Virtual DOM 就是快，diff 不是免费的，batching 么 MVVM 也能做，而且最终 patch 的时候还不是要用原生 API。在我看来 Virtual DOM 真正的价值从来都不是性能，而是它：
- 为函数式的 UI 编程方式打开了大门
- 可以渲染到 DOM 以外的环境，比如 ReactNative
性能比较
- 初始渲染：Virtual DOM > 脏检查 >= 依赖收集
- 小量数据更新：依赖收集 >> Virtual DOM + 优化 > 脏检查（无法优化） > Virtual DOM 无优化
- 大量数据更新：脏检查 + 优化 >= 依赖收集 + 优化 > Virtual DOM（无法/无需优化）>> MVVM 无优化
Angular 与 Vue 对比
- 体积和性能
相较于 vue，angular 显得比较臃肿，比如一个包含了 Vuex + Vue Router 的 Vue 项目 (gzip 之后 30kB) ，而 angular-cli 生成的默认项目尺寸 (~65KB) 还是要小得多。
在渲染性能上，这两个框架都很快，性能上几乎没有差别。
- 开发效率
都提供了各自的脚手架工具，帮助提高从开发到构建打包的整套过程，另外均可以基于组件化开发，编写可复用的组件，大大较少重复性的工作。
Angular 是用 Typescript 写的， 更具有工程化的优势，但是 Vue 也可以通过引入 TS 及 vuex-ts-decorators 插件（非官方插件，学习成本）来抹平这一差距。
- 灵活性
Vue 相比于 Angular 更加灵活，可以按照不同的需要去组织项目的应用代码。比如，甚至可以直接像引用 jquery 那样在 HTML 中引用 vue，然后仅仅当成一个前端的模板引擎来用。
- 可维护性
相对而言 Vue 对 TS 的支持度较低，工程化方面不如 Angular。
Angular 的模块系统可以方便的对组件进行组装和解耦。因此 Angular 更适合大型项目的开发。