跳到主要内容

认识

一、认识​

二、特点​

三、Vue vs React​

1. 编译方式: Vue 是一个编译时 + 运行时的前端框架, Vue 通过编译 Template 得到虚拟 DOM 渲染函数, 可以在编译的时候进行非常好的性能优化, 比如动态标记、靶向更新、静态提升（静态节点、动态节点中的静态属性）、预字符串化、内联函数缓存等; React 是纯运行时前端框架, 在运行前, 已经将 JSX 全部转换为 ReactElement 虚拟 DOM, 在运行中没有机会进行编译优化。

2. 响应式特性: Vue 无论 Vue2 还是 Vue3 , 都是通过监听 get 访问属性进行依赖收集或者副作用收集, 通过监听 set 修改属性进行依赖触发或者副作用触发, 是一种自动的响应式更新机制。React 则是通过 this.setState 或者 useState dispatch 手动触发更新, 有开发者决定是否触发更新。

3. 虚拟 DOM 结构: React 为了解决更新的时候进行过多计算的问题引入了时间分片, 因此, React 的 VNode Fiber 中存储了诸多相关渲染方面的信息

4. 虚拟 DOM 比对算法: 对比算法: Vue2 和 Vue3 都使用了双端对比算法，而 React 的 Fiber 由于是单向链表的结构，所以在 React 不设置由右向左的链表之前，都无法实现双端对比

5. 虚拟 DOM 比对优化: 在 Diff 的时候，Vue2 是判断如果是静态节点则跳过过循环对比，而 Vue3 则是把整个静态节点进行提升处理，Diff 的时候是不过进入循环的，所以 Vue3 比 Vue2 的 Diff 性能更高效。React 是纯运行时前端框架, 在运行前, 已经将 JSX 全部转换为 ReactElement 虚拟 DOM, 在运行中没有机会进行编译优化, 所以无法进行静态节点分析的，因此 React 在对静态节点处理这一块是要逊色的。