Vue与React九个主要特征对比

[rico-c]

ES6支持：

Vue：支持纯ES5语法开发，在不使用脚手架的情况下兼容性也得到保证。

React：需要使用ES6语法进行开发，必须使用babel等工具对代码进行转码来保证兼容性。

代码结构：

Vue：JavaScript与HTML分离，可以更清晰、简单明了的处理逻辑和渲染，需要在HTML中引入v-if/v-for/{{}}等用于支持数据的响应式渲染。

React：使用JSX，JavaScript有能力更直接的处理渲染逻辑，尤其是复杂渲染逻辑。

数据更新方式：

Vue：双向数据绑定，直接修改data可以自动触发渲染。

React：单向数据绑定，state不可直接修改而是要依靠setState。

数据更新坑点：

Vue：需要注意在data更新后，DOM上的数据变化要在$nexTick中才能操作，否则数据还没有自动更新。

React：需要注意优化在shouldComponentUpdate中避免使用setState以防止进入无限渲染循环。

组件化：

Vue：Vue的组件是高度封装的函数，写Vue组件不是在写函数，而是在写函数的参数。

React:React组件是函数，写一个接收 props 作为参数，并对改props进行各种处理的函数。

组件通信：

Vue:

• 父组件通过props向子组件传递数据或回调函数，大部分情况下使用props传递数据。
• 子组件通过$emit绑定在父组件的自定义事件来触发函数并传递数据。

React:

• 父组件通过props向子组件传递数据或者回调。
• 子组件通过使用回调函数向父组件传递数据。

生命周期：

Vue:

React:

使用样式：

Vue：可以直接使用style标签，通过scoped属性控制css的作用域。

React：可以直接在标签中使用style对象；也可以将style对象分离，在标签中引用；也可以使用引入的css文件。

对Native和小程序的支持：

Vue：使用阿里开源Weex实现对原生App的支持，使用mpvue等实现对小程序的支持。

React：FB开源React-Native实现对原生App的支持，京东开源Taro可以实现同时对小程序和原生的支持。