Vue和React在使用上的异同及原理的区别

基于个人开发心得及网上一些文章学习整理，主要总结两者相似点的实际区别

数据绑定

Vue中默认是支持双向绑定，包括：

父子组件之间，props 可以双向绑定（在 Vue2.x 中已去掉了，只能通过事件方式修改）
组件与DOM之间可以通过 v-model 双向绑定

而React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState() 模式。

数据更新

Vue中,数据由data属性在vue对象中管理，可以直接赋值修改

React中state中的数据不可直接修改,需要使用setState方法更新

数据监听

Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能

React 默认是通过比较引用的方式进行的，如果不优化可能导致大量不必要的VDOM的重新渲染

模板渲染

Vue通过一种拓展的HTML语法进行渲染，官方推荐的单文件组件格式与传统页面更接近

React 是通过JSX渲染模板，将HTML/CSS与JS混合编写

但其实这只是表面现象，毕竟React并不必须依赖JSX。在深层上，模板的原理不同，这才是他们的本质区别：

Vue是在和组件JS代码分离的单独的模板中，通过指令（如v-if、v-for）来实现插值，条件，循环等语法
React是在组件JS代码中，通过原生JS实现模板中的常见语法

Vue的模板语法，更接近以前一些模板框架的写法，但也会带来一些问题，如：由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们import 一个组件之后，还需要在 components 中再次声明，而React中render函数是支持闭包特性的，所以我们import的组件在render中可以直接调用。

虚拟DOM

Vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树

React默认情况下全部组件都会重新渲染，需要通过PureComponent/shouldComponentUpdate来按需优化

状态管理（Vuex 和 Redux）

Vuex的数据是可变的，可以直接修改，通过 getter/setter检测数据变化

Redux 使用的是不可变数据，每次都是用新的state替换旧的state，在检测数据变化时通过 diff 的方式比较差异

而这个区别，其实也是因为 React 和 Vue的设计理念上的区别。React更偏向于构建稳定大型的应用，相比之下，Vue更偏向于简单迅速的解决问题，更灵活，不那么严格遵循条条框框。

Toninie / toninie.github.io