vue3相比vue2效率提升在哪些方面？

---

静态提升

相比vue2，vue3对以下静态节点进行提升：

1. 元素节点
2. 没有绑定的动态内容

//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