前言

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

什么是Vue Vapor

Vue Vapor是一個(gè)無(wú)虛擬DOM模式版本的vue。這個(gè)倉(cāng)庫(kù)是2023年11月9日基于vuejs/core倉(cāng)庫(kù)（也就是vue3倉(cāng)庫(kù)）新建的，項(xiàng)目地址為 https://github.com/vuejs/core-vapor。Vue Vapor目前還處于實(shí)驗(yàn)階段，不過(guò)你可以通過(guò)官方提供的Vue Vapor演練場(chǎng)在線體驗(yàn)無(wú)虛擬DOM版本的vue。playground演練場(chǎng)的地址為：https://vapor-repl.netlify.app。

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

如何使用Vue Vapor

對(duì)于使用者來(lái)說(shuō)無(wú)虛擬DOM模式版本的vue和目前的vue3用法是一樣的，vue只是對(duì)內(nèi)部實(shí)現(xiàn)進(jìn)行了修改，對(duì)外暴露出的API還是一樣的，當(dāng)然關(guān)于虛擬DOM相關(guān)的API在Vue Vapor中沒(méi)有了。

我們來(lái)看看一個(gè)demo，和目前vue3寫(xiě)法是一樣的：

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

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

我們?cè)賮?lái)看看運(yùn)行效果：

從*.vue文件渲染到瀏覽器真實(shí)DOM的過(guò)程

我們先來(lái)看看目前版本的vue是如何從一個(gè)*.vue文件渲染到瀏覽器真實(shí)DOM？

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

我們?cè)賮?lái)看看Vue Vapor是如何從一個(gè)*.vue文件渲染到瀏覽器真實(shí)DOM？

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

沒(méi)有虛擬DOM后，Vue Vapor如何實(shí)現(xiàn)響應(yīng)式

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

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標(biāo)簽dom元素。明顯可以看見(jiàn)render函數(shù)中沒(méi)有createElementVNode等生成虛擬DOM的函數(shù)調(diào)用。

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

我們?cè)賮?lái)看看下面 _on函數(shù)，這里是讓input輸入框監(jiān)聽(tīng)一個(gè)名為update:modelValue的事件，觸發(fā)事件后會(huì)將上下文中的msg變量的值更新為輸入框中的輸入值。

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

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

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

總結(jié)

本文介紹了Vue Vapor，沒(méi)有虛擬DOM版本的vue。對(duì)于普通開(kāi)發(fā)者來(lái)說(shuō)Vue Vapor其實(shí)和目前的vue3沒(méi)有什么區(qū)別，前提是不涉及虛擬DOM。只是vue在內(nèi)部實(shí)現(xiàn)上去掉了虛擬DOM，改為直接操作真實(shí)DOM。

到此這篇關(guān)于一文帶你了解什么是Vue Vapor的文章就介紹到這了,更多相關(guān)Vue Vapor內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論