引言：其实react和vue大体上来说是相同的，例如都使用虚拟DOM高效的更新视图，都提倡组件化，都实现了数据驱动视图，都使用diff算法，也都对diff算法进行了优化。。。

但是在具体的实现上又不尽相同，接下来就从组件化，虚拟DOM以及数据驱动视图三个方面对比下vue和react框架的相同和不同之处。

一、组件化的异同：

1、相同点：

• 都推崇组件化，提高复用和开发效率；
• 都有组件通信，数据都有组件自身的和外部传入的两种

2、不同点：

• 模板：1.react是使用jsx语法，html标签和{JS表达式}；2.vue是使用template，html标签和{{JS表达式}}；
• 样式：1.react：行内样式、外部文件和css in js；2.vue写在vue文件的style标签中；

二、虚拟DOM

1、相同点：

• 虚拟DOM都是用js对象来模拟真实DOM
• 都使用虚拟DOM + diff算法；UI更新都会生成新的虚拟DOM树，与旧的虚拟DOM树进行比较，然后更新真实DOM；
• 在写动态列表的时候，都需要设置一个唯一值 key，这样在 diff 算法处理的时候性能才最大化

2、不同点：

• 更新的粒度不一样：1.react 会自顶向下全diff；2.vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
• diff算法：Vue2的核心Diff算法采用了双端比较的算法

三、数据流

• react的数据是单向流动的
• vue的数据是双向流动的

四、数据驱动视图：

• vue的MVVM框架；ViewModel是实现数据驱动视图的核心
• React通过setState实现数据驱动视图；引发一次组件的更新过程从而实现页面的重新渲染