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 class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill1140" title="Vue"><img src="https://img.php.cn/upload/skill/000/000/081/178797612947731.jpg" alt="Vue" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="overflowclass">Vue</a> <p class="overflowclass">避免 Vue 常见错误——响应式陷阱、ref 与 reactive 区别、计算属性时机及 Composition API 陷阱。</p> </div> <a rel="nofollow" href="/xiazai/skill1140" title="Vue" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </div>—— 整个div及其所有后代（包括插值、指令）都跳过后续更新； -
组件使用方式相同：
<usercard v-once :user="currentUser"></usercard>—— 组件实例只初始化一次，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 操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
