前言

Vapor Mode 是 Vue 3.6 推出的一個新的高效渲染模式，它實現(xiàn)了無虛擬DOM并大幅度提升性能。

先了解下 Vue 各版本的渲染機制：

• Vue 1.0：直接操作真實 DOM。
• Vue 3.6 之前：生成虛擬 DOM，更新時通過比對前后虛擬 DOM 的變化，來更新對應(yīng)的真實 DOM。
• Vue 3.6: Vapor Mode 模式，。

1、Vapor Mode 是什么？

Vapor Mode 是 Vue.js 3.6 版本的一個可選編譯策略，它在模版編譯階段會生成高效的 JavaScript 代碼，直接操作真實 DOM 節(jié)點，并通過細粒度的響應(yīng)式效果（reactive effects）來更新它們。

Vapor Mode 的核心思想就是，在編譯階段就精確的拿到哪些節(jié)點時永不變化的靜態(tài)節(jié)點，哪些是動態(tài)節(jié)點并與哪個數(shù)據(jù)源相綁定，這樣我們就不需要 VNode 和 DOM Diff 的過程了。

2、Vapor Mode 相比于虛擬 DOM 的好處有哪些？

• 節(jié)省虛擬 DOM 的內(nèi)存開銷：虛擬 DOM 畢竟是用 JS 對象描述 DOM 并存儲在內(nèi)存中，Vapor Mode 可以節(jié)省這部分內(nèi)存。
• 節(jié)省 DOM Diff 的運行開銷：虛擬 DOM 在更新時需要進行 DOM Diff 比對出最小更新變化，而 Vapor Mode 也可以節(jié)省這部分比對的運行開銷。
• 更小的包大?。核コ颂摂M DOM 的運行時代碼 Virtual DOM runtime code，自然就減少了代碼體積。
• 更高的性能：通過在 effects 中直接對真實 DOM 進行細粒度的更新，性能更高。

3、如何使用 Vapor Mode？

3.1 創(chuàng)建一個 vue3 + ts 的項目

pnpm create vite vue3-vapor

3.2 手動修改 vue 版本

手動將 package.json 中的 vue 版本改為最新的 3.6.0-alpha.5，然后運行 pnpm i 命令安裝。

{
  "dependencies": {
    "vue": "3.6.0-alpha.5"
  }
}

3.3 改造入口文件 main.ts

跟 Vue2 中組件或者指令的注冊方式類似，Vapor Mode 也有兩種引入方式。

方式一：通過 createVaporApp 全局引入

直接使用 createVaporApp 代替 createApp 來創(chuàng)建應(yīng)用，這樣在全局的組件都會采用 Vapor Mode 的模式，而且不會引入虛擬 DOM 的運行時代碼，整體應(yīng)用體積會更小。

// main.ts
import { createVaporApp } from 'vue'
import './style.css'
import App from './App.vue'
createVaporApp(App as any).use(vaporInteropPlugin).mount('#app')

方式二：通過 vaporInteropPlugin 插件注冊

在入口文件 main.ts 中引入 vaporInteropPlugin 插件，然后可以在組件中按需啟用 Vapor Mode。

// main.ts
import { createApp, vaporInteropPlugin } from 'vue'
import './style.css'
import App from './App.vue'

createApp(App).use(vaporInteropPlugin).mount('#app')

然后我們在組件中通過在 script 標(biāo)簽上增加 vapor 屬性，就會啟用 Vapor Mode，改變這個組件的編譯模式，沒有加 vapor 屬性的組件還是會使用虛擬 DOM。

<script setup vapor>
// ...
</script>

4、Vapor Mode 構(gòu)建產(chǎn)物分析

導(dǎo)入和輔助函數(shù)的區(qū)別：

• 虛擬 DOM 模式：會導(dǎo)入如 _createElementVNode、_createElementBlock、_toDisplayString、_normalizeClass 等函數(shù)，用于創(chuàng)建和處理 VNode。
• Vapor Mode 模式：會導(dǎo)入如 _template、_renderEffect、_setText、_setClass、_setDynamicProp 等，用于直接 DOM 創(chuàng)建和更新。

更新機制：

• 虛擬 DOM 模式：在狀態(tài)變化時，通過 render 函數(shù)生成新的虛擬 DOM，然后 patch 真實 DOM。
• Vapor Mode 模式：通過 _renderEffect 包裹，每個動態(tài)部分（如類、屬性、文本）獨立跟蹤依賴。當(dāng)響應(yīng)式值變化時，僅執(zhí)行對應(yīng)的 setter 函數(shù)（如 _setText(node, value) 或 _setClass(node, value)），直接修改 DOM 無需 diff 過程。

下面來比較下兩種模式模式編譯后代碼的區(qū)別。

<script setup>
import { ref } from 'vue';
const msg = ref('Hello World!');
const classes = ref('p');
const count = ref(0);
</script>

<template>
  <h1 :class="classes" @click="count++">{{ msg }}</h1>
</template>

虛擬 DOM 模式編譯后的代碼如下（簡化版）：

import { toDisplayString as _toDisplayString, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";

export function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("h1", {
    class: _normalizeClass(_ctx.classes),
    onClick: _cache[0] || (_cache[0] = () => _ctx.count++)
  }, _toDisplayString(_ctx.msg), 11 /* TEXT, CLASS, NEED_PATCH */));
}

會生成 VNode，使用補丁標(biāo)志（如 11）標(biāo)記需要更新的部分。

Vapor Mode 模式編譯后的代碼如下（簡化版）：

import { renderEffect as _renderEffect, setText as _setText, setClass as _setClass, template as _template } from "vue/vapor";

const t0 = _template("<h1></h1>");

export function render(_ctx) {
  const n0 = t0();  // 直接創(chuàng)建 <h1> DOM 節(jié)點
  n0.addEventListener('click', () => _ctx.count++);  // 直接事件綁定

  _renderEffect(() => _setText(n0, _ctx.msg));  // 響應(yīng)式文本更新
  _renderEffect(() => _setClass(n0, _ctx.classes));  // 響應(yīng)式類更新

  return n0;
}

直接使用 document.createElement 創(chuàng)建節(jié)點，事件通過 addEventListener 綁定，更新通過 effects 細粒度執(zhí)行。

5、Vapor Mode 使用建議

• Vapor Mode 目前還處于 alpha 版本，不建議在生產(chǎn)環(huán)境下使用。
• 在對性能敏感的組件，可以選擇性啟動 Vapor Mode 模式提升其性能，這是一種漸進式增強的思想。

到此這篇關(guān)于Vue.js使用Vapor Mode的方法小結(jié)的文章就介紹到這了,更多相關(guān)Vue.js使用Vapor Mode內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論