静态提升

相比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 class="user">
	{{user.name}}
</div>

const hoisted = {
	class:'user'
}
function render(){
	createVNode('div',hoisted,user.name)
}

图片演示

预字符串化

实际开发中，一个组件实际上大多数东西是静态的，只有少数东西是使用变量。

<template>
	<div>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</div>
	<div>{{ list }}</div>
</template>

vue2对于模板的处理是解析器parseHTML，通过标记和不断循环生成一个带有type、tag、attrsList、children等属性的对象，所以生成的vnode实际上是一棵包含了静态和动态的巨大树。

vue3对于静态节点会处理成字符串，该优化在ssr下的性能提升尤为明显。值得注意的是，目前vue3只会对连续的静态节点才会预字符串化，经过测试目前版本3.2.31当连续静态标签为5个时可以触发预字符串化。

<template>
  <div class="user">
    <ul>
      <li @click="msg++">add</li>
      <li>{{ msg }}</li>  
      <div>sogo</div>
      <li>hhhh</li>
      <li>hhhh</li>
      <li>
        <ul>
          <li>hhhh</li>
          <li>hhhh</li>
          <li>hhhh</li>
          <li>hhhh</li>
          <li>hhhh</li>
        </ul>
      </li>   
      <div><div>333</div></div>
      <li>{{ msg }}</li>
    </ul>
  </div>
</template>

图片演示

缓存事件处理函数

vue3认为事件的处理一般是不会变化的，所以其对事件处理函数进行缓存。

//vue2
render(ctx){
	return createVNode('button',{
		onClick:function($event){
			ctx.count++
		}
	})
}

//vue3
render(ctx,_cache){
	return createVNode('button',{
		onClick:cache[0] || (cache[0] = ($event) => ctx.count++)
	})
}