vue和react之间的区别有哪些？

本节目标：理解“vue和react之间的区别有哪些？”的核心思路，并能把它用于实际开发或面试表达。

说明：原 OneNote 中有图片引用，但图片未包含在导出目录中；本页保留了可用的文字与代码内容。 数据绑定不同

• vue实现了数据的双向绑定；
• react数据流动是单向的；

virtual DOM不一样

• vue会自动跟踪每一个组件的依赖关系,不需要重新渲染整个组件树；
• 而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

组件写法不一样

• React推荐的做法是 JSX + inline style，也就是把HTML和CSS全都写进JavaScript了，即'all in js';

• Vue推荐的做法是webpack+vue-loader的单文件组件格式，即html、css和

  js

  写在同一个文件;

state对象的不同

• state对象在react应用中不可变的，需要使用setState方法更新状态;
• 在vue中，state对象不是必须的，数据由data属性在vue对象中管理；

组件通信的不同

Vue中有三种方式可以实现组件通信：

• 父组件通过props向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据；
• 子组件通过事件向父组件发送消息，当然也可以使用回调函数，但实际上很少用。
• 通过V2.2.0中新增的provide/inject来实现父组件向子组件注入数据，可以跨越多个层级。

React中也有对应的三种方式：

• 父组件通过props可以向子组件传递数据或者回调；
• 可以通过 context 进行跨层级的通信，这其实和 provide/inject 起到的作用差不多。
• 子组件传数据给父组件时，由于React 本身并不支持自定义事件，一般都是使用回调函数。

监听数据变化的实现原理不同Vue通过 getter/setter以及一些函数的劫持，能精确知道数据变化。 React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。为什么React不精确监听数据变化呢？这是因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加棒。