Vue3 到底做了啥,能比Vue2.x性能快1.2~2倍?

1,398 阅读2分钟

Proxy响应式

在 Vue2.x中,对于一个深层属性嵌套的对象,要劫持它内部深层次的变化,就需要递归遍历这个对象,执行 Object.defineProperty 把每一层对象数据都变成响应式的,这会有很大的性能消耗。

在 Vue3中,使用 Proxy API 并不能监听到对象内部深层次的属性变化,因此它的处理方式是在 getter 中去递归响应式,这样的好处是真正访问到的内部属性才会变成响应式,简单的可以说是按需实现响应式,就没有那么大的性能消耗。

PatchFlag

在 Vue2.x中,vnode是进行全量比较的。 在 Vue3中,增加了静态标记 PatchFlag。在创建 Vnode的时候,会根据 vnode的内容是否可以变化,来为其添加静态标记 PatchFlag。这些标记又可以分为不同的类型,比如 TEXT,PROPS,CLASS等。

Screen Shot 2021-07-07 at 17.44.25.png

这么做的好处就是在diff算法的时候,只会比较有 PatchFlag的节点。比如标记为 TEXT的 PatchFlag节点,在diff的时候,只需要比对文本内容就可以。

Screen Shot 2021-07-07 at 17.36.30.png

hoistStatic

静态提升,它将静态节点的定义,提升到了父作用域,缓存起来。

Screen Shot 2021-07-08 at 16.37.23.png

多个相邻的静态节点,也会被合并起来。

Screen Shot 2021-07-08 at 16.40.02.png

cacheHandler

默认情况下 @click 事件被认为是动态变量,所以每次更新视图的时候都会追踪它的变化。但是正常情况下,@click 事件在视图渲染前和渲染后,都是同一个事件,基本上不需要去追踪它的变化,所以 Vue 3.0 对此作出了相应的优化叫cacheHandler。

Screen Shot 2021-07-08 at 16.55.10.png

SSR优化

当你在开发中使用 SSR 开发时,Vue 3.0 会将静态标签直接转化为文本。

未使用SSR

Screen Shot 2021-07-08 at 17.15.16.png

当使用SSR优化的时候

Screen Shot 2021-07-08 at 17.16.21.png

tree-shaking

tree-shaking 依赖 ES2015 模块语法的静态结构(即 import 和 export),通过编译阶段的静态分析,找到没有引入的模块并打上标记。如果项目中没有引入 Transition、KeepAlive 等不常用的组件,那么它们对应的代码就不会打包进去。