vue3相比vue2效率提升在哪些方面?
静态提升
相比vue2,vue3对以下静态节点进行提升:
- 元素节点
- 没有绑定的动态内容
//vue2的静态节点
render(h){
//直接render
h('h1',null,'this is h1')
}
//vue3的静态节点
const hoisted = createdVNode('h1',null,'this is h1')
render(){
//直接使用被提升的静态节点
}
通过打开vue3工程,可以看到起运行代码中包含着hoisted标记的变量,/*@__PURE__*/则告诉打包工具该函数是非dead code代码,如图:
同时我们通过测试也可以发现,vue3里手写vnode可以缩小到如下三个属性,测试发现缺少shapeFlag并不能生效。
render() {
return {
"type": "h1",
"children": "this is h1",
"shapeFlag": 9,
}
}
vue2的vnode和vue3有所区别,主要是某些属性的表述上有所差异,具体用法其实是一样的。
除了静态节点的提升,静态属性也是可以被提升的。
<div