v-memo, v-cloak, v-pre, v-once

1. v-memo(Vue3 新增)

作用:通过记忆模板子树来优化渲染性能,仅当依赖项变化时才重新渲染

适用场景

  • 大型数据表格中的某一行渲染
  • 复杂组件树的静态部分
  • 高频更新但实际变化较少的数据展示

示例

<!-- 当item.id和item.status不变时不会重新渲染该行 -->
<div v-for="item in bigList" :key="item.id" v-memo="[item.id, item.status]">
  {{ item.content }}
  <StatusBadge :status="item.status" />
</div>

注意事项
✔️ 必须配合v-for使用
✔️ 依赖项数组应该包含直接影响渲染结果的属性
✖️ 不要滥用,可能适得其反


2. v-cloak

作用:防止未编译的模板闪现(解决双花括号显示问题)

适用场景

  • 传统多页应用逐渐迁移到Vue时
  • 网络较慢时的DOM元素初始化阶段
  • 服务器渲染(SSR)混合式应用的加载过程

使用方式

[v-cloak] {
  display: none !important;
}
<div v-cloak>
  {{ importantMessage }}
</div>

注意事项
❗ 必须搭配CSS才能生效
❗ 不适用于异步加载大量数据的场景(需配合加载状态提示)


3. v-pre

作用:跳过该元素及其子元素的编译过程

适用场景

  • 展示Vue模板语法的文档网站
  • 含有大量静态内容且无需响应式的区块
  • 性能敏感场景跳过不必要的编译

示例

<!-- 展示源代码示例时 -->
<pre v-pre>
  {{ rawTemplateCode }}
  <div @click="demoMethod">示例代码</div>
</pre>

注意事项
⚠️ 该元素内部的所有Vue语法都会被原样输出
⚠️ 不能与任何Vue指令(包括v-if等)一起使用


4. v-once

作用:元素和组件只渲染一次,后续不再更新

适用场景

  • 静态条款/协议文档展示
  • 永远不会改变的初始值显示
  • 性能优化的关键渲染路径优化

示例

<!-- 页脚公司信息 -->
<footer v-once>
  <p>© 2023 某某科技有限公司</p>
  <address>北京市xxx区</address>
</footer>

<!-- 初始化配置展示 -->
<span v-once>初始值:{{ initialData }}</span>

注意事项
❗ 会导致子组件也停止更新
❗ 禁用响应式跟踪,节省内存但不可逆


对比总结

指令 响应式 编译阶段 性能影响 典型用例
v-memo ✅ 条件性 运行时 优化高频更新 表格行、复杂组件树
v-cloak 全局 防止模板初始显示异常
v-pre 编译前 跳过编译提升性能 展示Vue代码、静态大文本
v-once 运行时 减少后续渲染开销 永不更新的静态内容

组合使用建议

  1. 不要过度优化,优先保证功能正确性
  2. 在性能分析后针对瓶颈使用相应指令
  3. 考虑维护成本:v-memo需要维护依赖项列表
  4. 移动端列表页可组合使用v-memo+v-once实现最佳性能

结合具体场景合理使用这些指令,可以显著提升应用的性能和用户体验,同时保持代码的可维护性。

posted @   木燃不歇  阅读(9)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示