0%

vue和react的区别

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