静态提升

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

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

//vue2的静态节点
render(h){//直接renderh('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++)})
}

从图中的vue3工程可以看到click事件引入缓存处理。

Block Tree

在vue2中，新旧树对比，很多时候会对新旧两颗树的相同静态节点进行多次对比。vue3优化了这一处理，其会在block tree的根节点记录该树的动态节点，直接跳过静态节点的对比。所以该处理不用深度遍历和广度遍历，在静态节点更多的情况下，其性能远远领先vue2的diff。

需要注意的是，该处理是基于树稳定的情况下，当该树的某一节点不稳定时，会将其拆为另一个block tree。

PatchFlag

vue2在新旧树对比时，需要对比属性是否变化，内容是否变化等，而vue3会通过patchFlag标记这些节点类型、节点属性、节点内容等，在新旧树对比中只对比某一属性。

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

「翻译」Vue3 相比 Vue2 都有哪些优化？
在过去的一年中,Vue 团队一直在研究 Vue.js 的下一个主要版本,我们希望在 2020 年上半年发布该版本.(在撰写本文时,这项工作仍在进行中.)Vue 的新的主要版本的构想形成于 2018 年 ...
一篇文章简述下 Vue3 相比 Vue2 有哪些 “与众不同”
作者:花哨 https://juejin.cn/post/7011372376969445413 前言希望本篇文章能帮你加深对 Vue 的理解,能信誓旦旦地说自己熟练Vue2/3.除此之外,也希望路 ...
面试官：简述下 Vue3 相比 Vue2 有哪些 “与众不同”
关注程序IT圈,回复"加群" 加入我们一起学习,天天进步作者:花哨 https://juejin.cn/post/7011372376969445413 前言希望本篇文章能帮 ...
开发效率提升300％，Vue3新特性已成气候！
在 Vue2.0 时代,国内大厂的前端开发框架,几乎清一色偏向 React.因为对于业务成熟的公司而言,一个项目,可能会包含很多非侵入式的代码和服务,并不是功能实现了就万事大吉. 但随着 Vue3.0 ...
【Vuejs】1017- Vue3 效率提升主要表现在哪些方面？
vue3.0的各种表现还是非常棒的,相比vue2.0确实上了一个台阶,据说在客户端渲染效率比vue2提升了1.3~2倍,SSR渲染效率比vue2提升了2 ~3倍.在面试的过程中可能也会被问到. ??? ...
在 Vue3 成为默认版本后，盘点了 Vue3 与 Vue2 的区别
目录前言正文一.Vue3 与 Vue2 区别概览二.Vue3 与 Vue2 区别详述生命周期多根节点 Composition API 异步组件(Suspense) Teleport 响应式 ...
Vue3和Vue2的区别
目录前言概览一.新特性二.差异详情一.vue3新特性 1.组合式API---setup 2.ref创建响应式数据 3.Teleport---"传送门" 4.多根节点 5 ...
电商直播平台如何借助容器与中间件实现研发效率提升100%？
作者:鹿玄,阿里云解决方案架构师前言直播带货是近期发展非常迅猛的一种新的电商模式.构建一个电商直播平台从技术角度上大致可以分为视频直播服务.CDN.前端(H5/ 小程序).大数据.以及各种业务后台 ...
不用亲手搭建型了！华人博士提出few-shot NAS，效率提升10倍
[导读]你能找到最优的深度学习模型吗?还是说你会「堆积木」?最近,伍斯特理工学院华人博士在ICML 2021上发表了一篇文章,提出一个新模型few-shot NAS,效率提升10倍,准确率提升20%! ...

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