Vue和React的相同点很多:
都使用Virtual DOM
都使用组件化的思想
都是响应式,使用MVVM模式
都有自己的构建工具,Vue的vue-cli,React的create-react-app
区别:
数据流向不同
react从诞生开始就推崇单向数据流,而Vue是双向数据流
Vue基于template模板+Option API/Compnent API,React本质核心只有一个Virtual DOM+Diff算法,Api非常少
响应式原理不同:
Vue依赖收集,自动优化,数据可变
Vue递归监听data的所有属性,直接修改
当数据改变时,自动找到引用组件重新渲染
React:
React基于状态机,手动优化,数据不可变,需要setState驱动新的State替换旧的State
当数据改变时,以组件为根目录,默认全部重新渲染
diff算法不同:
两者思维相似,都是基于两个假设:
不同的组件产生不同的DOM结构,当type不同时,对应DOM操作就是直接销毁老的DOM,创建新的DOM
同一层次的一组子节点,可以通过唯一的key区分
源码实现上有区分:
Vue Diff使用双向指针,边对比边更新DOM
React主要使用diff队列保存需要更新的DOM,得到patch树,再统一操作批量更新DOM
事件机制不同
Vue
Vue原生事件使用标准Web事件
- Vue组件自定义事件机制,是父子组件通信基础
- Vue合理利用了snabbdom库的模块插件
React
React原生事件被包装
,所有事件都冒泡到顶层document监听,然后在这里合成事件下发。基于这套,可以跨端使用事件机制,而不是和Web DOM强绑定。- React组件上无事件,父子组件通信使用props