摘要：
之前的vue是使用虛擬 DOM的，但是Vue 3.6 帶來了一個意義重大的更新： Vapor Mode 渲染模式。
Vue 渲染策略的演進：
- Vue 1.x： 基于模板渲染策略，直接將模板轉換為DOM元素，并為每個DOM元素創建響應式綁定。
- Vue 2.x： 引入虛擬DOM，使渲染過程更加高效。虛擬DOM通過diff算法與真實DOM進行比較，減少了對DOM樹的操作。
- Vue 3.x： 在虛擬DOM基礎上，進一步優化了編譯器，支持靜態分析，生成更加高效的渲染函數。這使得Vue3在渲染性能方面相較于Vue2有了顯著提升。
虛擬 DOM 的局限性：
盡管 Vue 3.x 引入了更強大的編譯器，虛擬 DOM 依然面臨內存消耗和計算開銷的問題。虛擬 DOM需要對每次更新的節點進行遍歷并計算差異，尤其是在渲染大量動態內容時，性能優勢有限，所以換成Vapor Mode。
Vapor Mode是什么？
Vue 3.6 推出的編譯期DOM優化模式，通過跳過運行時虛擬DOM，直接將模板編譯為原生DOM操作代碼，實現更高效的渲染性能。
核心特性：
- 無虛擬DOM?： 運行時不再創建虛擬節點、對比（diff）或修補（patch），直接生成原生DOM操作指令。 ?
- 性能提升?： 編譯時靜態分析模板，減少運行時DOM操作次數，包體積更小，渲染速度更快。
- ?跨平臺兼容?： 保留Vue原有的跨平臺能力（如Web、SSR、小程序等）。 ?
怎么工作的?
- 編譯階段分析模板： Vue 編譯器在構建時會分析< template >中的內容，識別哪些是靜態的、哪些是響應式的。
靜態部分：如< div >標簽，編譯器會生成一次性創建它們的代碼，運行時無需理會。
動態綁定：如 {{ count }}，每一個綁定都會生成一個獨立的 “更新函數”。創建“Effect 函數”：每個響應式綁定都會生成一個獨 - 立的副作用函數（effect）：
它知道自己依賴哪個響應式數據（如ref或reactive屬性``）
它知道自己要操作哪個 DOM 節點（如某個< p >）
它知道要執行的操作是什么（如更新 textContent、修改class或調整style）
也就是說，一旦數據變化，只會觸發該數據相關的DOM更新邏輯。
舉個例子：
<template><div><h1>前端充電寶</h1><p>計數器: {{ count }}</p><button @click="count++">增加</button></div>
</template><script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
在 傳統模式 中:
- 點擊按鈕時：Vue 會重新執行 render()，生成一份新的虛擬DOM；
- 然后 diff，找出 count 變了；最后再更新< p >標簽的文本。
effect(() => {pElement.textContent = '計數器: ' + count.value
})
在 Vapor Mode 中：
- 編譯時，Vue 識別出< p >的文本綁定了count；它為這個綁定生成一個更新函數。
- 當點擊按鈕后，
count更新，這個 effect 就直接執行，精準更新<p>的內容。全程沒有虛擬 DOM，也沒有 diff，對性能極為友好。
使用方式：
通過在 單文件組件 的< script >標簽中添加 vapor 屬性即可啟用，無需修改業務邏輯代碼。 ?
適用場景：
主要解決傳統虛擬DOM在動態節點較多時的性能瓶頸，例如高頻更新的數據綁定或復雜組件渲染場景。
有啥優勢？
- 更新速度快： 跳過 diff，只更新真正變化的 DOM；
- 占用更少內存： 不再維護虛擬 DOM；
- 首次渲染更快： 直接創建真實 DOM；
- 打包體積更小： 可移除虛擬 DOM 相關代碼；
- 按需啟用： 可在組件級別使用 Vapor，不影響全局；
那是不是虛擬 DOM 就過時了？
不是。Vue 并沒有一刀切，而是走了“混合動力”路線：
- Vapor Mode 是可選的；
- < script setup> 中使用 vapor 關鍵字即可開啟；
- 也可以通過 createVaporApp() 創建純 Vapor 應用。
這意味著你可以：
- 在關鍵性能組件里啟用 Vapor；
- 在其它部分繼續使用虛擬 DOM。
什么時候用虛擬 DOM ，什么時候用 Vapor？
繼續使用虛擬 DOM 的場景：
-
組件結構動態復雜，依賴 render 函數；
-
項目已成規模，虛擬 DOM 的性能已滿足需求；
擁抱 Vapor Mode 的場景：
-
組件結構靜態明確，狀態變化點固定；
-
對性能要求極高：如移動端、嵌入式、實時數據 UI；
-
構建時間允許進行編譯優化分析。
