一文帶你了解什么是Vue?Vapor

更新時間：2024年11月26日 14:42:18 作者：前端歐陽

隨著Svelte和SolidJS的流行,無虛擬DOM模式逐漸開始火了起來,Vue?Vapor就是一個無虛擬DOM模式版本的vue,下面就跟隨小編一起來深入了解一下Vue?Vapor吧

前言

隨著Svelte和SolidJS的流行，無虛擬DOM模式逐漸開始火了起來。vue也推出了無虛擬DOM模式的版本，就是我們今天要講的Vue Vapor。

什么是Vue Vapor

Vue Vapor是一個無虛擬DOM模式版本的vue。這個倉庫是2023年11月9日基于vuejs/core倉庫（也就是vue3倉庫）新建的，項目地址為 https://github.com/vuejs/core-vapor。Vue Vapor目前還處于實驗階段，不過你可以通過官方提供的Vue Vapor演練場在線體驗無虛擬DOM版本的vue。playground演練場的地址為：https://vapor-repl.netlify.app。

目前Vue Vapor只實現(xiàn)了vue3中的部分功能，KeepAlive、Teleport等還未實現(xiàn)。詳情查看官方的TODO：https://github.com/vuejs/core-vapor?tab=readme-ov-file#todo

如何使用Vue Vapor

對于使用者來說無虛擬DOM模式版本的vue和目前的vue3用法是一樣的，vue只是對內(nèi)部實現(xiàn)進行了修改，對外暴露出的API還是一樣的，當然關于虛擬DOM相關的API在Vue Vapor中沒有了。

我們來看看一個demo，和目前vue3寫法是一樣的：

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

<template>
  <h1>{{ msg }}</h1>
  <input v-model="msg" />
</template>

我們再來看看運行效果：

從*.vue文件渲染到瀏覽器真實DOM的過程

我們先來看看目前版本的vue是如何從一個*.vue文件渲染到瀏覽器真實DOM？

目前的vue是通過webpack或者vite等工具先將*.vue文件編譯成一個js文件，js文件中主要的就是render函數(shù)。然后執(zhí)行render函數(shù)生成虛擬DOM，再調(diào)用瀏覽器的DOM API根據(jù)虛擬DOM生成真實DOM掛載到瀏覽器上。

我們再來看看Vue Vapor是如何從一個*.vue文件渲染到瀏覽器真實DOM？

也是一樣的首先通過webpack或者vite等工具先將*.vue文件編譯成一個js文件，js文件中主要的就是render函數(shù)。然后執(zhí)行render函數(shù)后會直接調(diào)用瀏覽器的DOM API生成真實DOM掛載到瀏覽器上。其實就是跳過了虛擬DOM的過程。

沒有虛擬DOM后，Vue Vapor如何實現(xiàn)響應式

我們先來看看demo編譯后的js代碼中的render函數(shù)，下面是我簡化后的代碼：

function render(_ctx) {
  _withDirectives(n2, [[_vModelText, () => _ctx.msg]])
  _on(n2, "update:modelValue", $event => ((_ctx.msg) = $event))

  _renderEffect(() => {
    _setText(n1, _ctx.msg)
  })
}

這里的n2變量為input輸入框dom元素，n1變量為顯示msg值的h1標簽dom元素。明顯可以看見render函數(shù)中沒有createElementVNode等生成虛擬DOM的函數(shù)調(diào)用。

我們先來看看_withDirectives函數(shù)，vue3的withDirectives函數(shù)的功能為給虛擬DOM增加自定義指令。我們這里沒有虛擬DOM，所以這里是給真實DOM（input輸入框）增加v-model的指令。

我們再來看看下面 _on函數(shù)，這里是讓input輸入框監(jiān)聽一個名為update:modelValue的事件，觸發(fā)事件后會將上下文中的msg變量的值更新為輸入框中的輸入值。

我們最后來看看_renderEffect函數(shù)，看名字你可能已經(jīng)猜出來了。這個函數(shù)和vue3中的watchEffect比較相似，會立即運行一個函數(shù)。并且追蹤函數(shù)中用的的依賴，這里的依賴是msg變量。當依賴的值變化時會再次執(zhí)行這個函數(shù)。

這里的_setText(n1, _ctx.msg)，實際就是執(zhí)行了n1.textContent = _ctx.msg。textContent 屬性表示一個節(jié)點及其后代的文本內(nèi)容，也可能通過給它賦值的方式刪除它的所有子節(jié)點，并替換為一個具有給定值的文本節(jié)點，和innerText功能比較相似。

當msg變量的值變了后就會執(zhí)行回調(diào)函數(shù)，在回調(diào)函數(shù)中會執(zhí)行_setText函數(shù)。_setText函數(shù)會通過更新h1標簽的textContent屬性讓h1標簽始終顯示msg變量最新的值，從而實現(xiàn)響應式。