目标
让大家更好地理解 vue 3.0 中对性能进行优化的机制
参考尤雨溪的有关 vue 3.0 中性能提升和新特性的分享
vue 3.0 的目标
- 更快
- 更小
- 更容易维护
- 更容易和 native 集成，更好的多端支持
- 让开发更轻松
以上就是 Vue 3.0 的特点和目的。主要提高性能。尽可能兼容 vue 2.0 API, 让 vue2.0 的用户付出最小的成本平滑过渡到 vue 3.0。
更快
1. 新的 vdom 实现
如何实现 React 中的虚拟 DOM （上）
如何实现 React 中的虚拟 DOM （下）
- 在 vue 3.0 中我们重新推翻后重写了虚拟 DOM 的实现，100% 提升了 mounting 和 patching。在一些细节地方下了很多功夫。官方宣称渲染速度最快可以翻倍。
更多编译时的优化以减少运行时的开销
vdom 在运行时有许多潜在的开销，例如模板里有许多不可变动地方，而 vdom 会从新生成对应的节点。然后进行比对，这些操作做很多情况下是不必要的。这也是很多开发者在重新审视 vdom 的性能。可以在编译阶段对模板进行分析，来减少运行时的开销。
示例
Template =
`
<Comp>
<div>
<span></span>
</di>
</Comp
`
render(){
const Comp = resolveComponent('Comp',this)
return createFragment([
createComponentVNode(Comp,null,null,0),
createElementVNode('div',null,[
createElementVNode('span',null,null,0)
],2)
],8) /** */
}
- 通过编译时区分自定义组件和原生元素，然后在运行时分别调用不同的方法
- 无论是常见自定义组件 createComponentVNode 和生产原生元素对应vnode 的方法 createComponentVNode 参数都是一致的
现在将模板作为字符串传入 h 函数，然后生成 vnode 。在 vue2.0 对于原生元素（如div）和自定义组件（例如v-component），是在运行时进行区分的。说明判断需要进行开销。
我们可以在编译时进行处理，运行时就不再判断直接生成原生元素对应的 vdom 。
如果是组件，就直接生成对应vdom组件。
在生成虚拟Dom, 我们的函数调用尽量形状一致，也就是具有同样的参数。这样更容易被 javascript 引擎进行优化。
还可以在模板中直接静态的分析元素包含的子元素的类型。 div 包含 span 一个节点。我们就可以给代码留下 hint 来避免更多判断。就避免不必要的遍历。
优化 slot 的生成
如果每一次 首先会更新父组件然后再生成子组件。这也就是父子关联更新。同时触发了两个组件更新。把所有 slot 都生成 scope slot。生成一个lazy 的函数，当你把函数传入给子组件，由组件来决定什么时候调用这个函数。
着进行预判或者预处理。然后运行时少了一些推测的工作
- ，这样无疑是影响应用的性能。可以在编译阶段对着进行预判或者预处理。然后运行时少了一些推测的工作。也就是把原生元素和自定义组件进行区分然后分别处理。
- 通过增模板的加编译时间，这就是意味着减少运行时间。解释 component fast path
网友评论