Vue3 为何比 Vue2 快

目录

1. Proxy 响应式

1.1 Vue2 的 Object.defineProperty

1.2 Vue3 的 Proxy Reflect

2. PatchFlag(动,静-节点标记)

3. hoistStatic(静态节点作用域提升)

4. cacheHandler(缓存事件)

5. SSR 优化(静态节点绕过 vdom)

6. tree-shaking(动态 import)


1. Proxy 响应式

1.1 Vue2 的 Object.defineProperty

  • 深度监听需要一次性递归,影响性能
  • 无法监听新增属性和删除属性(需要:Vue.set Vue.delete)
  • 无法原生监听数组,需要特殊处理

1.2 Vue3 的 Proxy Reflect

  • Proxy 深度监听性能更好
    Vue2 的 Object.defineProperty 一次性递归监听
    Vue3 的 Proxy 在 get 时才递归监听
  • Proxy 可监听 新增 / 删除属性
  • 可原生监听数组变化

2. PatchFlag(动,静-节点标记)

  • 编译模板时,动态节点做标记
  • 标记,分为不同的类型,如 TEXT PROPS
  • diff 算法时,可以区分静态节点,以及不同类型的动态节点

 Vue3 模板编译工具:
Vue Template Explorerhttps://vue-next-template-explorer.netlify.app/

3. hoistStatic(静态节点作用域提升)

  • 将静态节点的定义,提升到父作用域,缓存起来(再次 render 时,不会重新定义)
  • 多个相邻的静态节点,会被合并起来
  • 典型的拿空间换时间的优化策略

 多个相邻静态节点,被合并

4. cacheHandler(缓存事件)

  • 缓存事件
  • 典型的拿空间换时间的优化策略

5. SSR 优化(静态节点绕过 vdom)

  • 静态节点直接输出,绕过了 vdom
  • 动态节点,还是需要动态渲染

6. tree-shaking(动态 import)

  • 编译时,根据不同的情况,引入不同的 API

 

猜你喜欢

转载自blog.csdn.net/weixin_39763711/article/details/126768501