vue3初探
在开始介绍之前，先给大家推荐一个网站https://vue-next-template-explorer.netlify.app。这是Vue3官方演示Vdom的示例网站，本篇文章也是基于它进行演示的。
Vue3 在
Vdom的更新时，只会关注它有变化的部分。这样的优化使 Vue3 既跳出了 Vdom 的性能瓶颈，又依然保留了可以手写render function的灵活性。相当于 Vue3 既有 react 的灵活性，又有基于模板的性能保证。——尤雨溪
从diff算法去看vue3和vue2.x的区别
我们现在来看看同样的html，在vue2和vue3的渲染中对比出不同之处
<div>
<p>空空</p>
<p>{{msg}}</p>
</div>vue2的本质是在对比两个树（对象）
vue3会在创建虚拟DOM的时候，会根据DOM的内容会不会发生变化，添加一个静态标记
看完图，我们来看看vue3的render函数
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
// DOM的内容不会变化的元素
_createVNode("p", null, "空空"),
// DOM的内容会变化的元素
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}总结
从上述两张图的对比中，我们可以继承
1.vue2中的虚拟DOM是进行全量的对比
2.vue3新增了静态标记(PatchFlags),只对比带有patch flag的节点的虚拟DOM，并且可以通过flag的信息得知当前节点要对比的具体内容从相对性去看vue3和vue2.x的区别
静态提升（hoisStatic）
- 静态提升
- vue2中无论元素是否参与更新,每次都需要重新创建
- vue3对于不参与更新的元素，只会被创建一次，之后每次渲染时会不断复用
- 静态提升之前
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_createVNode("p", null, "空空"),
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}- 静态提升之后
// 把不需要更新的元素，提升出来
const _hoisted_1 = /*#__PURE__*/_createVNode("p", null, "空空", -1 /* HOISTED */)
export function render(_ctx, _cache, $props, $setup, $data, $options) {
return (_openBlock(), _createBlock("div", null, [
_hoisted_1,
_createVNode("p", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
]))
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
