本文就目前前端较流行框架Vue、React做了分析对比，后期持续更新Angular框架对比，如有不对欢迎纠正。
| 名称 | React | Vue |
|---|---|---|
| 描述 | 一个用于构建用户界面的js库 | 一个渐进式js框架，渐进式：在声明式渲染（视图模版引擎）基础上、通过添加组件系统、客户端路由、状态管理等来构建一个完整的框架 |
| 特点 | （1）声明式设计：React采用声明范式，可以轻松描述应用。 （2）高效：React通过对DOM的模拟，最大限度的减少与DOM的交互。 （3）灵活：React可以与已知的库或框架（个人觉得框架是要求你按照它提供的规则去写代码， 而库是多个工具函数的集合。）很好的配合。 | （1）轻量级框架 （2）双向数据绑定； （3）丰富的指令； （4）组件化 |
| 优势 | （1）易于集成第三方库、被第三方库集成； （2）各组件由社区维护，相对社区较活跃； （3）生态圈丰富； （4）已将各界面抽象成组件，例如Button、Dialog等 （5）跨浏览器兼容、速度快、模块化、单向数据流、兼容性好 （6）提供了较成熟的ReactNative支持移动端开发 | （1）各组件由官方提供； （2）生态圈丰富； （3）易上手，只需关注功能开发，无需关注配置 （4）具备一个实现完整框架的能力 |
| 缺点 | React本身只是一个V（view）而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。 | （1）不支持IE8、相较不够成熟； （2）移动端开法集成weex，目前处于发展期 |
| 适用场景 | （1）适用于大型应用; （2）构建移动应用程序； | （1）适用于将传统app向vue转换的web项目； |
| 性能 | 手动更新组件使得在大型应用中性能较佳：当数据发生变化会触发shouldComponentUpdate生命周期函数，它用来决定组件是否被重新渲染。可重写该方法来节省性能。 | （1）大型app性能差：因vue每个组件内部自动实现了性能优化，因此当数据量较大时vue监听增多，会出现卡顿。因此不适用于大型应用 |
| 编程 | （1）利用JSX语法实现声明式、组件化编程；（JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；它是类型安全的，在编译过程中就能发现错误；使用 JSX 编写模板更加简单快速。） （2）一切皆对象，推崇函数式编程； （3）单向数据流； | （1）推荐webpack+vue-loader的单文件组件格式，保留了HTML+js+css分离写法，同时支持JSX组件化编程； （2）双向绑定； |
| 构建工具 | 通过使用create-react-app可以构建单页面app。 局限性： （1）它不允许在项目生成时进行任何配置； （2）它只提供一个构建单页面应用的默认选项； （3）它不能用用户自建的预设配置构建项目，这对企业环境下预先建立约定是特别有用的。 | vue-cli：一个可基于vue.js开发的完整系统，致力于将 Vue 生态中的工具基础标准化。提供：脚手架、零配置原型开发、一个运行时依赖 、一个丰富的官方插件集合、一套完全图形化的创建和管理 Vue.js 项目的用户界面。 |
| diff算法 | 只对两颗树同级节点进行比较，比较的结果新增、移动、删除，复杂度O(n)： （1）DOM结构发生改变——直接卸载并重新create （2）DOM结构一样——不会卸载,但是会update变化的内容； （3）所有同一层级的子节点需要增加key来提升更新性能，需要shouldComponentUpdate这个生命周期函数方法来进行控制。 | （1）在内存中构建虚拟dom树 （2）将内存中虚拟dom树渲染成真实dom结构 （3）数据改变的时候，将之前的虚拟dom树结合新的数据生成新的虚拟dom树 （4）将此次生成好的虚拟dom树和上一次的虚拟dom树进行一次比对（diff算法进行比对），来更新只需要被替换的DOM，而不是全部重绘。在Diff算法中，只平层的比较前后两棵DOM树的节点，没有进行深度的遍历。 （5）会将对比出来的差异进行重新渲染 |
| app开发 | React Native：思想是多个平台可以写多套代码，但其使用的是同一套语言框架。社区较活跃 | weex的思想是多个平台，只写一套代码。但是处于发展期 |
| 推荐框架组合 | React + Redux/Flux + React-router | vue + vuex + vue-router |
