🔰 基礎理解

? 語法：

<span v-once>{{ msg }}</span>

? 效果：

?	只渲染一次，之后無論數據如何變化，該內容都不會更新。
?	非常適用于靜態內容或首次加載后不需要變化的數據。

🧪 示例：

<template><div><p v-once>頁面加載時：{{ now }}</p><p>始終更新：{{ now }}</p><button @click="update">更新時間</button></div>
</template><script>
export default {data() {return {now: new Date().toLocaleTimeString()}},methods: {update() {this.now = new Date().toLocaleTimeString()}}
}
</script>

🔍 點擊按鈕后：

• 第一個 v-once 的段落不變。
• 第二個正常顯示時間變化。

🔍 深入理解（進階用法與原理）

? 渲染性能優化利器

• Vue 會給使用 v-once 的節點打上“靜態標記”，渲染后直接跳過后續的虛擬 DOM diff。
• 大量使用靜態內容的場景（如文章頁、商品詳情頁首屏）中，可以明顯降低開銷。

? 不僅適用于文本，也適用于組件和 DOM 樹

<!-- 整個 div 結構都不會再更新 -->
<div v-once><h1>{{ title }}</h1><p>{{ content }}</p>
</div><!-- 甚至可以用在組件上 -->
<StaticSection v-once />

? 組合使用其他指令時的影響

<div v-for="item in list" :key="item.id" v-once>{{ item.name }}
</div>

• 上面每一項都只渲染一次。
• 若 list 變化，新項目不會被渲染，原有的不會更新（?? 謹慎使用）。

?? 注意事項：

場景	建議
靜態展示內容	? 推薦使用
表單項、交互式組件	? 禁止使用
配合 v-for 渲染數據列表	?? 謹慎使用
需要響應式更新的數據	? 禁止使用

🧠 總結

內容	說明
指令名稱	v-once
核心作用	元素或組件僅初次渲染，后續數據更新不再影響它
最佳場景	靜態內容、加載提示、SEO內容占位
性能優化	避免不必要的 diff 提升渲染性能
陷阱警告	會永久凍結 DOM，不適合交互、響應式場景

在vue2/3上的差異

? 共通點（Vue 2 與 Vue 3 都一致）

特性	Vue 2 / Vue 3 共通
語法一致	? <div v-once>...</div>
渲染后不可變	? 渲染一次后，后續數據變更不再影響 DOM
用于組件或元素	? 都支持作用于組件、元素、結構塊
優化靜態性能	? 避免 diff，提升性能
與 v-for 一起使用	? 可使用，但慎用（新項不會渲染）

🚀Vue 2 vs Vue 3 差異點

方面	Vue 2	Vue 3
編譯靜態優化	部分依賴手動優化（如 v-once）	自動靜態提升（靜態節點優化更強）
靜態標記處理機制	借助 v-once 標記為靜態	靜態標記 + 靜態提升：更智能判斷
與 Composition API 配合	不適用（無 Composition API）	可在 script setup 等組合式代碼中使用
與 Suspense 一起用	不支持 Suspense	可用于 Suspense 結構中的靜態部分

🧪 Vue 3 中的替代 / 輔助方案

雖然 v-once 保留了，但 Vue 3 提供了更豐富的性能優化方式，例如：

defineRenderEffect（底層運行時層面優化）

Vue 3 更深入的靜態節點處理，減少對 v-once 的依賴。

使用 markRaw 跳過響應式追蹤（組合式 API）

import { markRaw } from 'vue'const staticData = markRaw({ foo: 'bar' })

用于組件外部傳入不希望響應式追蹤的對象。

🔧 實際開發建議

場景	推薦方式
靜態首屏 HTML	? v-once
組合式組件中的加載塊	? + fallback
一次性說明/免責聲明	? v-once
性能優化目標是 diff 節點過多	? Vue 3 會自動優化，v-once 為錦上添花

🎯 總結一句話

v-once 在 Vue 2 和 Vue 3 中基本一致，但 Vue 3 靠自動靜態提升已經能覆蓋大部分場景，不再強依賴 v-once；它仍然是你手動優化靜態結構的利器，但 Vue 3 讓你用得更少、寫得更輕松。