Vue3.0 六大亮点
- Performance: 性能比 Vue2.x 快 1.2~2倍
- Tree shaking support: 按需编译, 体积比 Vue2.x 更小
- Composition API: 组合 API(类似 React Hooks),
最大亮点 - Better TypeScript support: 更好的 TS 支持
- Custom Renderer API: 暴露了自定义渲染API
- Fragment, Teleport(Protal), Suspense: 更先进的组件
Vue3.0 是如何变快的
diif 算法优化
- Vue2 中的虚拟 Dom 是进行全量的对比
- Vue3 新增了静态标记(PatchFlag)
- 在与上次虚拟节点进行对比的时候, 只比较带有 patch flag 的节点
- 并且可以通过 flag 的信息得知当前节点要对比的具体内容
静态标记枚举
export const enum PatchFlags {
TEXT = 1,// 动态文本节点
CLASS = 1 << 1, // 2 // 动态 class
STYLE = 1 << 2, // 4 // 动态 style
PROPS = 1 << 3, // 8 // 动态属性，但不包含类名和样式
FULL_PROPS = 1 << 4, // 16 // 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较。
HYDRATE_EVENTS = 1 << 5, // 32 // 带有监听事件的节点
STABLE_FRAGMENT = 1 << 6, // 64 // 一个不会改变子节点顺序的 fragment
KEYED_FRAGMENT = 1 << 7, // 128 // 带有 key 属性的 fragment 或部分子字节有 key
UNKEYED_FRAGMENT = 1 << 8, // 256 // 子节点没有 key 的 fragment
NEED_PATCH = 1 << 9, // 512 // 一个节点只会进行非 props 比较
DYNAMIC_SLOTS = 1 << 10, // 1024 // 动态 slot
HOISTED = -1, // 静态节点
// 指示在 diff 过程应该要退出优化模式
BAIL = -2
}
hoistStatic 静态提升
- Vue2 中无论元素是否参与更新, 每次都会重新创建
- Vue3 中对于不参加更新的元素, 只会被创建一次, 之后会在每次渲染的时候不停的复用
静态提示之前
静态提升之后
cacheHandlers 事件侦听器缓存
- 默认情况下 onClick 会被视为动态绑定, 所以每次都会去追踪它的变化
- 但是因为是同一个函数, 所以没有必要追踪变化, 直接缓存起来复用即可
开启事件监听缓存之前:
开启事件监听缓存之后:
我们可以观察到开启事件监听缓存之后的代码中没有
静态标记, 在 Vue3 的 diff 算法中, 只有有静态标记的才会进行比较, 才会进行追踪
不会进行比较, 性能就更好了
SSR 渲染
- 当有大量静态的内容时候，这些内容会被当做纯字符串推进一个 buffer 里面， 即使存在动态的绑定，会通过模板插值嵌入进去。这样会比通过虚拟 dmo 来渲染的快上很多很多。
- 当静态内容大到一定量级时候，会用
_createStaticVNode方法在客户端去生成一个 static node， 这些静态 node，会被直接 innerHtml，就不需要创建对象，然后根据对象渲染。
