2020最新Vue入门实战教程-Vue,React,Angular新手如何选择？

俗话说，知己知彼百战不殆，那么如果有两个对手都互相非常的了解对方，那么最后谁会胜出呢？

先来看看 vue与React的区别

相同点：

1）React采用特殊的JSX语法，Vue推崇.vue特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用

2）中心思想相同：一切都是组件，组件实例之间可以嵌套

3）都提供合理的钩子函数，可以让开发者定制化的去处理需求

4）都不内置AJAX，Route等功能到核心包，而是以插件的方式加载

5）在组件开发中都支持mixins特性

不同点：

1）React依赖Virtual DOM，而Vue.js使用的是DOM模板，React采用的Virtual DOM会对渲染出来的结果做出检查

2）Vue在模板中提供了指令，过滤器，可以非常方便，快捷的操作DOM

3）vue组件分为全局注册和局部注册，在react中都是通过import相应组件，然后模板中引用。

4）props是可动态变化的，子组件也实时更新；react中官方建议props要像纯函数那样，输入输出一致对应，而且不太建议通过props来更改视图

5）子组件通过显示的调用props选项来声明它期待获得的数据。而react中不必须，另两者都有props校验机制

6）每个Vue实例都实现了事件接口，方便父子组件通信，小型项目中不需要引入状态管理机制。而react必须自己实现

7）Vue增加语法糖computed和watch，React需要自己写一条逻辑来实现

8）react的整体思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form。vue是数据可变的，双向绑定，声明式的写法。

再看vue与Angularjs区别

相同点：

1）都支持指令：内置指令和自定义指令

2）都支持过滤器：内置过滤器和自定义过滤器

3）都支持双向数据绑定

4）都不支持低端浏览器

不同点：

1）AngularJS学习成本高，增加了Dependency Injection特性，Vuejs提供的API都比较简单，直观。

2）在性能上，AngularJS依赖对数据做脏检查，所有Watcher越多越慢Vue使用基于Object.defineproperty进行依赖收集和派发更新，使用异步队列更新，所有的数据都是独立触发的。

3）Angular采用TypeScript开发，而Vue可以使用JavaScript也可以使用TypeScript。

4）AngularJS封装组件比较麻烦

分析数据绑定类型

React数据绑定

考虑虚拟DOM树的更新：

1）属性更新，组件自己处理

2）结构更新，重新“渲染”子树（虚拟DOM），找出最小改动步骤，打包DOM操作，给真实DOM树打补丁。

3）单纯从数据绑定来看，React虚拟DOM没有数据绑定，因为setState()不维护上一个状态（状态丢失），谈不上绑定

4）从数据更新机制来看，React类似于提供数据模型的方式（必须通过state更新）

5）没有双向数据绑定的话，input的双向场景怎么实现，通过框架提供的API，手动通知数据变化，和操作DOM的方式很像。

Angular数据绑定

Angular采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生之后，将变更的数据发送到视图，更新页面展现。如果是手动对ViewModel的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

Vue数据绑定

Vue则使用ES5提供的Object.defineproperty方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据执行一次检测。数据和视图的绑定与同步，最终体现在对数据的读写处理过程，也就是Object.defineproperty定义的数据的set，get函数中。在对数据进行读取时，如果当前有Watcher（对数据的观察者，watcher会负责将获取的新数据发送给视图），那将该Watcher绑定到当前的数据上（dep.depend(),dep关联当前数据和所有的watcher的依赖关系），是一个检查并记录依赖的过程（依赖收集）。而在对数据进行赋值时，如果数据发生改变，则通知所有的watcher。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。

然后对比三大框架

React与Vue相同点：

1）使用Virtual DOM，有较高的运行速度

2）提供组件化功能

3）可使用redux与vuex进行状态管理，响应式，依赖追踪

React

1）组件重复渲染问题需要手动优化

2）可以使用redux进行状态管理，函数式，不可变，模式化，时间旅行

3）可使用JSX，完全的JavaScript能力

4）社区繁荣

Vue

1）可使用JSX，推荐使用模板语言

2）学习曲线平缓

Angular

1）完善的MVVM框架，包含模板，数据双向绑定，路由，模块化，服务，过滤器，依赖注入等所有功能

2）Typescript

3）脏检查，对脏数据的检查就是脏检查，比较UI和后台的数据是否一致。

比较

1）MVVM列表渲染的初始化，几乎一定比Virtual DOM慢，因为创建ViewModel/scope实例比起Virtual DOM来说要昂贵很多

2）大而全的框架，学习成本高。

通过这些对比数据来看，Vue更适合开发者无疑！