目标
让大家更好地理解 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
来源: http://www.jianshu.com/p/7b8ee02b3be1