Vue2.x 与 React 的异同

一、相似之处

• 都将注意力集中保持在核心库，而将其他功能如路由、全局状态管理交给相关的库。
• 都有自己的构建工具，能让你得到一个根据最佳实践设置的项目模版。
• 都使用了 Virtual DOM（虚拟DOM）提高重绘性能。
• 都有 props 的概念，允许组件间的数据传递。
• 都鼓励组件化应用，将应用分拆成一个个功能明确的模块，提高复用性。

二、不同之处

1. 数据流

Vue 默认支持数据双向绑定，而 React 一直提倡单向数据流。

2. 虚拟 DOM

Vue2.x 开始引入 Virtual DOM，消除了和 React 在这方面的差异，但是在具体的细节还是有各自的特点。

• Vue 宣称可以更快的计算出 Virtual DOM 的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
• 对于 React 而言，每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过 PureComponent/shouldComponentUpdate 这个生命周期来进行控制，但 Vue 将此视为默认的优化。

3. 组件化

Vue 和 React 最大的不同是模版的编写。

Vue 鼓励你去写近似常规 HTML 的模版，写起来很接近标准 HTML 元素，只是多了一些属性。React 则推荐你所有的模版都使用 JavaScript 的语法扩展 — JSX 书写。

具体来讲：

Vue 中，由于模版使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件后，还需要在 components 中再声明一下。而 React 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。

4. 监听数据变化的实现原理不同

• Vue 通过 getter/setter 以及一些函数的挟持，能精确知道数据变化，不需要特别的优化就能达到很好的性能。
• React 默认是通过比较引用的方式进行的，如果不优化 PureComponent/shouldComponentUpdate 可能会导致大量不必要的 VDOM 的重新渲染，这是因为Vue 使用的是可变数据，而 React 更强调数据的不可变。

5. 高阶组件

Vue 需要通过 mixins 来扩展，而 React 可以通过高阶组件（Higher order Components–HOC）来扩展。

原因是因为高阶组件实际上就是高阶函数，而 React 的组件本身就是存粹的函数，所以高阶函数对 React 来说易如反掌。相反 Vue 使用 HTML 模版来创建视图组件，这是模版无法有效的编译，因此 Vue 不采用 HOC 来实现。

6. 构建工具

• Vue ==> Vue-cli
• React ==> Create React APP

7. 跨平台

• Vue ==> Weex
• React ==> React Native