Vue3.0 为什么这么快？

最新推荐文章于 2024-06-13 11:06:22 发布

Ku1s

最新推荐文章于 2024-06-13 11:06:22 发布

阅读量1.5k

点赞数 34

分类专栏： vue 文章标签：缓存算法前端

本文链接：https://blog.csdn.net/m0_74989367/article/details/139023110

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

Vue3.0 为什么这么快？

Proxy 实现响应式，初始化时更快。

模板编译优化：静态内容直接输出、数据缓存 —— 所有的算法优化，都是拿空间换时间

diff 算法优化，让组件渲染更快。diff 算法和模板是相关的。PS：其实 diff 算法本身的对比逻辑，跟之前时一样的。可优化的是一些细节和条件分支。

tree-shaking

PS：通过 vue3 template explorer 来体验下面的内容。

PatchFlag 静态标记

【案例 1】生成 PatchFlag 是 1 /* TEXT */

 <div>
   <p>静态文字</p>
   <p>{{ msg }}</p>
 </div>
 import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 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 */)
   ]))
 }

【案例 2 】生成 PatchFlag 是 9 /* TEXT, PROPS */

 <div>
   <span>静态文字</span>
   <span :id="hello" class="bar">{{ msg }}</span>
 </div>
 import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 export function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (_openBlock(), _createBlock("div", null, [
     _createVNode("span", null, "静态文字"),
     _createVNode("span", {
       id: _ctx.hello,
       class: "bar"
     }, _toDisplayString(_ctx.msg), 9 /* TEXT, PROPS */, ["id"])
   ]))
 }

即，所有的静态内容都没有 PatchFlag 标记，动态内容都会有。这个 PatchFlag 到底有什么作用呢？

有了 PatchFlag 就可以区分出来动态节点和静态节点，只对比动态节点即可。

hoistStatic 静态提升

编译如下模板

 <div>
   <span>静态文字1</span>
   <span>静态文字2</span>
   <span>静态文字3</span>
   <span>{{ msg }}</span>
 </div>

开启 HoistStatic 选项，可以看到

静态节点，全部提升到父作用域去定义，并缓存起来。
多个静态节点挨着在一起，超过一定的数量，会被合并起来。
典型的“拿空间换时间”的优化方法，缓存就不用重复生成。

还有，如果多个静态节点挨着在一起，超过一定的数量，会被合并起来。例如:编译如下模板

 <div>
   <span>静态文字1</span>
   <span>静态文字2</span>
   <span>静态文字3</span>
   <span>静态文字4</span>
   <span>静态文字5</span>
   <span>静态文字6</span>
   <span>静态文字7</span>
   <span>静态文字8</span>
   <span>静态文字9</span>
   <span>静态文字10</span>
   <span>{{ msg }}</span>
 </div>

得到的结果

 import { createVNode as _createVNode, toDisplayString as _toDisplayString, createStaticVNode as _createStaticVNode, openBlock as _openBlock, createBlock as _createBlock } from "vue"
 
 const _hoisted_1 = /*#__PURE__*/_createStaticVNode("<span>静态文字1</span><span>静态文字2</span><span>静态文字3</span><span>静态文字4</span><span>静态文字5</span><span>静态文字6</span><span>静态文字7</span><span>静态文字8</span><span>静态文字9</span><span>静态文字10</span>", 10)
 
 export function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (_openBlock(), _createBlock("div", null, [
     _hoisted_1,
     _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)
   ]))
 }

cacheHandler 缓存事件

渲染如下模板

 <div>
   <span @click="onClick">
     静态文本
   </span>
 </div>

开启 cacheHandlers 开关，可以看到 onClick 事件会被缓存到 _cache[1] 中。

SSR 时的优化

编译如下模板，输出 SSR

 <div>
   <span>静态文字1</span>
   <span>静态文字2</span>
   <span>静态文字3</span>
   <span>{{ msg }}</span>
 </div>

静态文件直接输出，绕过了 vdom 到 dom 的过程。
这跟 PatchFlag 有点类似。

tree-shaking

编译以下几段模板，可以看到 import 的内容不一样。

<!-- 模板1 -->
 <div>
   <span>静态文字</span>
 </div>
 
 <!-- 模板2 -->
 <div>
   <span>静态文字</span>
   <span>{{ msg }}</span>
 </div>
 
 <!-- 模板3 -->
 <div>
   <span>静态文字</span>
   <input v-model="msg">
 </div>

即，针对不同情况，vue 会自动引入所需要的功能，而不会全部引入。这样就让使用者可以压缩他们项目打包的体积，即 tree-shaking