跳到主要内容

前端框架

React/Vue 对比​

共同点：

  1. 都是处理 UI 层框架；

不同点：

  1. 定位上看：Vue 是一个数据响应式框架，v-modal 可体现出它是一个 MVVM 框架（双向绑定）。React 强调单项数据流，需要手动 setState；
  2. 语法层面：Vue 主要是 Template 语法（Vue 也支持 jsx，目前用的人不多），React 则是 JSX（all in js）。
  3. Vue3 和 React 都推出了 hooks。Vue3 是 compositionAPI。
  4. UI 更新逻辑：两者都有 DOM Diff。Vue 是双端 Diff 算法，React 则是“仅右移”的算法。Vue 中有 track，当更改某些响应式数据时，Vue可以数据依赖的组件并更新，引入 Diff 主要是为了提高Vue的渲染效率；
  5. 社区：Vue 官方推出了很多周边工具，比如 Vue-Router、Vuex、Pinia 等，而 React 相关的工具基本都是第三方在维护。

DOM Diff​

Tree Diff​

  • 将新旧两棵树逐层对比，找出哪些结点需要更新；
  • 如果结点是组件就进行 Component Diff；
  • 如果结点是标签就进行 Element Diff；

Component Diff​

  • 如果结点是组件，就先看组件类型；
  • 类型不同直接替换（删除旧的）；
  • 类型相同则只更新属性；
  • 然后深入组件做 Tree Diff（递归）；

Element Diff​

  • 如果结点是原生标签，则看标签名；
  • 标签名不同直接替换，相同只更新属性；
  • 然后进入标签后代做 Tree Diff（递归）