Vue2,3的区别(更新中)

5 阅读1分钟

新特性

  •  webpack和vite

  •  TypeScript支持

  •  生命周期

  •  响应式原理

  •  Diff算法:

静态标记:

Vue2:通过标记静态根节点,跳过对这部分的 Diff。

Vue3:使用 Shape Flags 更精确地标记静态根,提高 Diff 效率。

静态节点提升:

Vue3在编译时会对静态节点进行提升,这些节点在更新时不会被重新创建,而是直接复用

  •  事件缓存:

Vue3 的cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个 click 事件。

  •  Composition API

  •  Fragement

  •  Suspense

  •  Teleport:

用于将内容传送到 DOM 树的其他位置。它特别适用于模态框、通知等需要脱离当前组件层次的内容。

  •  Vue 3 支持多个 v-model 绑定,并允许自定义传递的 prop 名称和事件名称。

  •  SSR 优化::Vue3使用异步 SSR,大大减少主线程执行代码量。

移除

  •  vue3中移除v-on.native修饰符

  •  vue3中移除keyCode作为v-on的修饰符

  •  vue3中移除过滤器filter

  •  vue3中移除全局时间总线EventBus

  •  vue3中移除mixins,增加Hooks