【5年以上前端】Vue 和 React 的区别看这里 - 知乎
Vue 和 React 有什么不同?_vue和react区别-CSDN博客
1、相同点:
① 都使用了虚拟 DOM;
② 组件化开发;
③ 都是单向数据流(父子组件之间,不建议子修改父传下来的数据);
④ 都支持服务端渲染
2、不同点:
① 响应式原理不同
Vue 采用双向数据绑定的响应式原理,实现了数据更新自动更新视图;
Vue2 响应式的特点就是依赖收集。数据变化的时候自动派发更新。
初始化时通过 Object.defineProperty 递归劫持 data 所有属性添加 getter / setter ,触发 getter 的时候进行依赖收集,修改时触发 setter 自动派发更新找到引用组件重新渲染。
Vue3 响应式使用原生 Proxy 重构了响应式。
一是 proxy 不存在响应式存在的缺陷,二是性能更好,不仅支持更多的数据结构,而且不用一开始递归劫持对象属性,而是代理第一层对象本身。运行时才递归,用到才代理。
用 effect 副作用来代替 Vue2 里的 watcher ,用一个依赖管理中心 trackMap 来统一管理依赖代替 Vue2 中的 Dep ,这样也不需要维护特别多的依赖关系,性能上取得很大进步。
React 单向数据流,需要手动 setState 来更新视图;
相比 Vue 的自动化, React 则是基于状态,单向数据流,数据不可变,需要手动 setstate 来更新,而且当数据改变时会以组件根为目录,默认全部重新渲染整个组件树,只能额外用
pureComponent / shouldComponentUpdate / useMemo / useallback 等方法来进行控制,更新粒度更大一些
② Diff 算法
Vue2、Vue3 和 React 中 Diff 算法的区别_小草莓蹦蹦跳的博客-CSDN博客
Vue2 是同层比较新老 vnode ,新的不存在老的存在就删除,新的存在老的不存在就创建,子节点采用双指针头对尾两端对比的方式,全量 diff,然后移动节点时通过 splice 进行数组操作
Vue3 是采用 Map 数据结构以及动静结合的方式,在编译阶段提前标记静态节点, Diff 过程中直接跳过有静态标记的节点,并目子节点对比会使用一个 source 数组来记录节点位置及最长递增子序列算法优化了对比流程,快 Diff ,需要外理的边际条件会更少
React 是递归同层比较,标识差异点保存到 Diff 队列保存,得到 patch 树,再统一操作批量更新 DOM 。 Diff 总共就是移动、删除、增加三个操作,如果结构发生改变就直接卸载重新创建,如果没有则将节点在新集合中的位置和老集合中的 lastIndex 进行比较是否需要移动,如果遍历过程中发现新集合没有,但老集合有就删除
③ 模板语法不同:React 的JSX,Vue 的 template;
Vue 使用基于 HTML 的模板语法,可以将模板直接染成 DOM 元素。
React则采用 JSX 语法,通过 JSX 语法直接描述 UI 组件的结构和样式,再通过 React 的渲染函数将其转化为真实的DOM元素。
④ 状态管理不同:React 的 Redux、mobx;Vue 的 Vuex、pinia
Vue 提供了 Vuex、pinia 状态管理库,使得状态管理变得简单和易于维护。
React 则提供了 Redux、mobx 等状态管理工具,让状态管理更加灵活和可控。
个人感受方面来说的话,
React
官方只关注底层,上层应用解决方案都交给社区,所以 React
生态体系丰富,社区强,而且每次更新改动小等;
而 Vue
是由官方主导开发和维护,生态没那么丰富,虽然上手比 React
简单一些,但每次更新堪称破土重来,改的倒是潇洒得很,这就注定我们学习成本大大增加,并不能做到学习一次就可以一直使用这个框架,1.0 改版 2.0 需要重新学习一遍,2.0 改版 3.0 又要学习一遍,甚至 3.0 到 3.2 都要重学一部分。
像是需要记的 API
,React
就那么几个,剩下的自己去写就行了,Vue
虽然在代码维护上有一定优势,可是它的 API
就多得多了,而且还分版本,比如 Vue2
有过滤器,Vue3
却没了,不仅要多记很多 API
和自定义指令,还需要对自己所学的 API
根据版本进行选择使用,感觉不怎么严谨
⑤ 生命周期不同
Vue 的生命周期包含了8个钩子函数,比较细致且易于理解和掌握。
React 的生命周期包含了10个钩子函数,其中有些钩子函数是过时的,也有一些新的钩子函数被引入。
⑥ 组件通信不同
Vue使用 props 和事件的方式进行父子组件之间的通信,同时也支持 Vuex 进行组件间通信。
React则主要通过 props 和回调函数的方式进行父子组件之间的通信,同时也支持 Redux 进行跨组件通信。