前言
隨着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。
如果我的文章對你有點幫助,歡迎關注公衆號:【歐陽碼農】,文章在公衆號首發。你的支持就是我創作的最大動力,感謝感謝!