前言
隨着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只實現了vue3中的部分功能，KeepAlive、Teleport等還未實現。詳情查看官方的TODO：https://github.com/vuejs/core-vapor?tab=readme-ov-file#todo
如何使用Vue Vapor
對於使用者來說無虛擬DOM模式版本的vue和目前的vue3用法是一樣的，vue只是對內部實現進行了修改，對外暴露出的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函數。然後執行render函數生成虛擬DOM，再調用瀏覽器的DOM API根據虛擬DOM生成真實DOM掛載到瀏覽器上。
我們再來看看Vue Vapor是如何從一個*.vue文件渲染到瀏覽器真實DOM？
也是一樣的首先通過webpack或者vite等工具先將*.vue文件編譯成一個js文件，js文件中主要的就是render函數。然後執行render函數後會直接調用瀏覽器的DOM API生成真實DOM掛載到瀏覽器上。其實就是跳過了虛擬DOM的過程。
沒有虛擬DOM後，Vue Vapor如何實現響應式
我們先來看看demo編譯後的js代碼中的render函數，下面是我簡化後的代碼：
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函數中沒有createElementVNode等生成虛擬DOM的函數調用。
我們先來看看_withDirectives函數，vue3的withDirectives函數的功能爲給虛擬DOM增加自定義指令。我們這裏沒有虛擬DOM，所以這裏是給真實DOM（input輸入框）增加v-model的指令。
我們再來看看下面 _on函數，這裏是讓input輸入框監聽一個名爲update:modelValue的事件，觸發事件後會將上下文中的msg變量的值更新爲輸入框中的輸入值。
我們最後來看看_renderEffect函數，看名字你可能已經猜出來了。這個函數和vue3中的watchEffect比較相似，會立即運行一個函數。並且追蹤函數中用的的依賴，這裏的依賴是msg變量。當依賴的值變化時會再次執行這個函數。
這裏的_setText(n1, _ctx.msg)，實際就是執行了n1.textContent = _ctx.msg。textContent 屬性表示一個節點及其後代的文本內容，也可能通過給它賦值的方式刪除它的所有子節點，並替換爲一個具有給定值的文本節點，和innerText功能比較相似。
當msg變量的值變了後就會執行回調函數，在回調函數中會執行_setText函數。_setText函數會通過更新h1標籤的textContent屬性讓h1標籤始終顯示msg變量最新的值，從而實現響應式。
總結
這篇文章介紹了Vue Vapor，沒有虛擬DOM版本的vue。對於普通開發者來說Vue Vapor其實和目前的vue3沒有什麼區別，前提是不涉及虛擬DOM。只是vue在內部實現上去掉了虛擬DOM，改爲直接操作真實DOM。
如果我的文章對你有點幫助，歡迎關注公衆號：【歐陽碼農】，文章在公衆號首發。你的支持就是我創作的最大動力，感謝感謝！