v-once是Vue 3中专为静态内容设计的编译期硬冻结指令，仅渲染一次，永久跳过响应式追踪、diff对比与DOM操作，适用于永不变化且不依赖响应式数据的内容，如版权信息、协议文本、静态标题等。

v-once 是 Vue 3 中专为静态内容设计的轻量级优化指令，它不参与响应式系统，也不触发后续更新——内容只渲染一次，之后完全跳过依赖收集、diff 对比和 DOM 操作。用对了，能明显降低 patch 时间和内存开销，尤其在高频更新的父组件里效果更突出。

哪些内容适合加 v-once？

核心判断标准：初始化后**永不变化**，且**不依赖任何响应式数据**。

• 页脚版权信息（如 © 2026 MyApp）
• 固定协议文本、帮助文档片段
• 静态标题、图标组件、不可变 banner 图文
• 初始化配置展示（如版本号、构建时间等只读字段）

怎么写才正确？

v-once 不接受参数，直接写在元素上即可。注意它会“冻结”整个节点及其所有子内容——包括插槽、计算属性、{{ }} 中的函数调用，都只执行一次。

✅ 正确示例：

<div v-once>
  <h2>用户服务协议</h2>
  <p>本协议自 2026 年 1 月 1 日起生效...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11189" title="Element Plus UI Vue3"><img
														src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Element Plus UI Vue3" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill11189" title="Element Plus UI Vue3" class="overflowclass">Element Plus UI Vue3</a>
													<p class="overflowclass">Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill11189" title="Element Plus UI Vue3" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>

❌ 错误用法：

• 给动态 key 的元素加 v-once（如
  ），key 变化时无法重新渲染
• 包裹需要响应式更新的内容（如

  {{ count }}

  ，count 变了也不会更新）

和 v-memo 有什么区别？

v-once 是编译期“硬冻结”，v-memo 是运行时“条件跳过”。

• v-once：一旦标记，永远不更新，适合真正静态的部分
• v-memo：需传入依赖数组（如 v-memo="[item.id, item.status]"），仅当数组值全相等时才复用 vnode
• 二者不能混用在同一元素上；v-memo="[]" 功能类似 v-once，但语义不同——它表达的是“无依赖需检查”，而非“永不变”

实际效果怎么看？

在 DevTools 的 Performance 面板中录制一次交互，对比加 v-once 前后的 patch 阶段耗时。通常可见：

• 跳过该节点的响应式追踪（effect 不触发）
• diff 过程中直接跳过整棵子树比对
• hydration 阶段更快，尤其 SSR 场景下更明显