本段汇总摘抄基于文章1：juejin.cn/post/684490…
- 两者的底层编译原理都是VDOM+diff算法
- Vue 使用的是
可变数据，而React更强调数据的不可变
1、 核心思想不同
-
vue以templete + option Api模板式语法，更偏DSL
-
react以底层all in js，函数式编程最大的好处是其稳定性（无副作用）和可测试性（输入相同，输出一定相同）
-
react hooks的主要作用体现在，替换HOC（还没有特别深的体会），更趋近于纯函数组件的开发，减少副作用（this带来的副作用）
2、组件实现不同
-
vue: “vue组件的script导出的是一个挂满options的纯对象” -> '然后再new Vue({options})拿到实例' -> 'options api中的this指向内部Vue实例' -> 'Vue插件都是基于Vue原型类基础之上建立的，这也是Vue插件使用Vue.install的原因，因为要确保第三方库的Vue和当前应用的Vue对象是同一个'
-
react: 'React内部使用了四大组件类包装VNode' -> '不同类型的VNode使用相应的组件类处理' -> 'React类组件都是继承自React.Component类，其this指向用户自定义的类'
-
数据流不同：
-
vue 2.x: 组件 <--> DOM 之间的双向绑定
-
React一直提倡的是单向数据流
-
一般会使用 Vuex 以及 Redux 等单向数据流的状态管理框架，对组件内部的数据流不太敏感
3、 响应式原理不同
-
vue:
Vue依赖收集，自动优化，数据可变( Object.definedPrototype()的getter/setter) -> 递归监听data的所有属性 -> 数据改变时，自动找到引用组件重新渲染 -
react: React基于状态机，手动优化，数据不可变，需要
setState驱动新的State替换老的State -> 当数据改变时，以组件为根目录，默认全部重新渲染
4、diff算法不同
同：
-
不同的组件产生不同的 DOM 结构
-
同一层次的一组子节点，可以通过唯一的 key 区分
不同：
-
vue: 基于snabbdom库 -> Vue Diff使用双向指针，边对比，边更新DOM
-
react: 主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM
5、事件机制不同
vue:
-
原生事件使用web标准的原生事件
-
自定义了一套事件机制，用于主子组件数据传递的通信基础
-
合理利用了snabbdom库的模块插件
react:
-
原生事件被包装，所有事件都冒泡到顶层document监听，然后在这里合成事件下发。
-
React组件上无事件，父子组件通信使用props(基于函数式组件的核心原理)
