vue3.0 是如何变快的

2022-10-25
上海
本文字数：1343 字
阅读完需：约 4 分钟

在开始介绍之前，先给大家推荐一个网站 https://vue-next-template-explorer.netlify.app。这是 Vue3 官方演示 Vdom 的示例网站，本篇文章也是基于它进行演示的。

Vue3 在 Vdom 的更新时，*只会关注它有变化的部分*。这样的优化使 Vue3 既跳出了 Vdom 的性能瓶颈，又依然保留了可以手写 render function 的灵活性。相当于 Vue3 既有 react 的灵活性，又有基于模板的性能保证。——尤雨溪

diff 算法优化

我们现在来看看同样的 html，在 vue2 和 vue3 的渲染中对比出不同之处

<div>    <p>空空</p>    <p>{{msg}}</p> </div>

复制代码

vue2 的本质是在对比两个树（对象）

vue3 会在创建虚拟 DOM 的时候，会根据 DOM 的内容会不会发生变化，添加一个静态标记

看完图，我们来看看 vue3 的 render 函数，会发现有变量的节点创建时会给到静态标记 (PatchFlags)去标识

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的信息得知当前节点要对比的具体内容

复制代码

复用优化（静态提升）

静态提升（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 */)  ]))}

复制代码

最后附上静态标记取值(PatchFlags)

export const enum PatchFlags {  TEXT = 1, // 动态文本节点  CLASS = 1 << 1, // 2 动态class  STYLE = 1 << 2, // 4 动态style  PROPS = 1 << 3, // 8 动态属性，但不包含类名和样式  FULL_PROPS = 1 << 4, // 16 具有动态 key 属性，当 key 改变时，需要进行完整的 diff 比较  HYDRATE_EVENTS = 1 << 5, // 32 带有监听事件的节点  STABLE_FRAGMENT = 1 << 6, // 64 一个不会改变子节点顺序的 fragment  KEYED_FRAGMENT = 1 << 7, // 128 带有key属性的 fragment 或部分带有 key  UNKEYED_FRAGMENT = 1 << 8, // 256 子节点没有 key 的 fragment  NEED_PATCH = 1 << 9, // 512 一个节点只会进行非 props 比较  DYNAMIC_SLOTS = 1 << 10, // 1024   动态 slot  HOISTED = -1,     // 静态节点  BAIL = -2         // 指示在 diff 过程应该要退出优化模式}

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/52f80a5a23b4c37d7bd240349】。文章转载请联系作者。

乌龟哥哥

关注

正在努力寻找offer的大四小菜鸟 2021-03-16 加入

擅长 Hbuilder、VS Code、MyEclipse、AppServ、PS 等软件的安装与卸载精通 Html、CSS、JavaScript、jQuery、Java 等单词的拼写熟悉 Windows、Linux、等系统的开关机看–时间过得多快，不说了，去搬砖了

发布

暂无评论

创作场景

vue3.0 是如何变快的

diff 算法优化

vue2 的本质是在对比两个树（对象）

vue3 会在创建虚拟 DOM 的时候，会根据 DOM 的内容会不会发生变化，添加一个静态标记

看完图，我们来看看 vue3 的 render 函数，会发现有变量的节点创建时会给到静态标记 (PatchFlags)去标识

总结

复用优化（静态提升）

静态提升（hoisStatic）

最后附上静态标记取值(PatchFlags)

乌龟哥哥

评论