v-once 是 Vue 3 中让元素或组件仅首次渲染、后续完全跳过更新的轻量指令；它不接收参数，适用于版权信息、固定徽章等静态内容，不阻止数据响应式变化，也不影响首次渲染。
v-once 是 Vue 3 中一个轻量但实用的性能优化指令，它让元素或组件在首次渲染后彻底“冻结”——后续响应式数据变化不会触发它的更新，DOM 也不会被重新比对或替换。
基础用法：直接写在标签上，不带表达式
v-once 不接收任何参数或表达式，只需写在任意 HTML 元素或自定义组件上即可生效：
-
普通元素示例：
<p v-once>页面标题：{{ title }}</p>—— 即使title后续被修改，该p标签内容永远保持初始值； -
含子节点的容器：
<div v-once><h2>说明</h2><p>{{ content }}</p></div>—— 整个div及其所有后代（包括插值、指令）都跳过后续更新； -
组件使用方式相同：
<UserCard v-once :user="currentUser" />—— 组件实例只初始化一次，props 改变、内部状态变化均不再触发重渲染。
适用场景：哪些地方加 v-once 最有效
它不是万能开关，而是针对明确「静态」或「准静态」内容的精准优化：
- 展示类文本块，如文章摘要、版权信息、帮助提示等，内容上线后极少变动；
- 列表项中固定部分，比如用户头像旁的「已认证」徽章，认证状态变更频率远低于整个列表刷新频率；
- 嵌套较深、计算开销大的子组件，且其输入 props 在当前生命周期内可视为稳定（例如图表配置组件）；
- 避免因父组件高频更新，导致子组件无谓的 diff 和 patch（尤其配合
v-for渲染长列表时）。
注意事项：别误用，也别期待它做别的事
v-once 的行为边界很清晰，理解这些能避开常见误区：
立即学习“前端免费学习笔记（深入）”；
-
不阻止响应式数据本身的变化 ——
ref或reactive的值照常更新，只是视图不反应； - 不跳过初始渲染 —— 它仍参与首次挂载，完整执行模板编译、响应式绑定、事件注册等流程；
- 不能和 v-if/v-else 同时作用于同一元素 —— 编译器会报错，逻辑冲突（一个要条件渲染，一个要锁死渲染结果）；
-
与 v-pre 不同 ——
v-pre是跳过编译（连{{ }}都原样输出），v-once是正常编译+仅首次渲染。
和其它指令搭配的小技巧
实际开发中，v-once 常和其他指令组合使用来增强语义或控制粒度：
- 在
v-for列表中给某个稳定字段加v-once：<span v-once>创建时间：{{ item.createdAt }}</span>，避免每次列表更新都重算这个不变的时间字符串； - 配合
v-memo（Vue 3.2+）做更细粒度缓存：v-memo控制是否跳过整个 vnode 更新，v-once则是强制跳过，二者定位不同，一般不混用； - 服务端渲染（SSR）中，v-once 内容会被保留为纯静态 HTML，客户端激活（hydration）时直接复用，减少 DOM 操作。
