跳到主要内容

指令

在 Vue 3 中，v-pre、v-once、v-memo（注意：不是 v-mome，应为拼写错误）和 v-cloak 是四个特殊的内置指令，用于优化渲染行为、提升性能或解决特定场景问题。下面逐一解释它们的含义和用法，并附上示例。

1. v-pre​

跳过该元素及其子元素的编译过程。Vue 不会对带有 v-pre 的节点进行任何处理，直接将其作为静态 HTML 渲染。

用途：​

  • 提升性能：避免对已知静态内容进行无谓的编译。
  • 显示原始 Mustache 语法（如文档示例）。

示例：​

<template>
  <div v-pre>
    {{ 这不会被编译，会原样显示 }}
    <span>{{ message }}</span>
    <!-- 也不会响应式更新 -->
  </div>
</template>

输出：{{ 这不会被编译，会原样显示 }} 和 {{ message }} 原样显示，不解析。

2. v-once​

只渲染元素或组件一次，后续数据变化不会触发更新。适用于静态内容。

用途：​

  • 性能优化：避免不必要的重新渲染。
  • 显示初始化时的值（即使数据后来变了也不更新）。

示例：​

<template>
  <div>
    <p v-once>初始化时的值: {{ count }}</p>
    <!-- 只渲染一次 -->
    <p>当前值: {{ count }}</p>
    <!-- 会随 count 变化 -->
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);

setTimeout(() => {
  count.value = 100; // 1秒后更新
}, 1000);
</script>

结果：初始化时的值: 0 永远不变；当前值: 100 会变。

3. v-memo​

基于依赖数组缓存子树的渲染结果。只有当依赖项变化时，才重新渲染该部分。

⚠️ 注意：v-memo 是 Vue 3.2+ 引入的指令，仅在 <template> 标签上使用。

用途：​

  • 高性能列表渲染（配合 v-for）。
  • 避免子组件或复杂结构的不必要重渲染。

示例：​

<template>
  <div
    v-for="item in list"
    :key="item.id"
  >
    <!-- 只有 item.id 或 color 变化时才重新渲染 -->
    <template v-memo="[item.id, color]">
      <ExpensiveComponent
        :data="item"
        :theme="color"
      />
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const list = ref([{ id: 1, name: 'A' }]);
const color = ref('blue');
</script>

💡 如果 color 改变，所有项都会更新；如果只是 list 中某项的 name 改变但 id 不变，且 color 未变，则该项不会重新渲染。

4. v-cloak​

保持元素隐藏，直到 Vue 实例完成编译。常用于防止页面加载时出现未编译的 Mustache 标签（如 {{ message }}）闪烁。

用途：​

  • 解决“闪现原始模板”问题（尤其在慢网络或 SSR 场景）。

使用方式：​

需配合 CSS：

<style>
  [v-cloak] {
    display: none;
  }
</style>

<template>
  <div v-cloak>
    {{ message }}
    <!-- 在 Vue 编译完成前不可见 -->
  </div>
</template>

当 Vue 挂载完成后，会自动移除 v-cloak 属性，元素正常显示。

⚠️ 注意：在 单文件组件（SFC） 中通常不需要，因为模板是在构建时编译的，不会暴露原始 Mustache。但在直接在 HTML 中使用 Vue（CDN 模式） 时非常有用。

总结对比​

指令作用典型场景
v-pre跳过编译显示原始模板、静态内容优化
v-once只渲染一次初始化快照、静态文本
v-memo条件缓存子树高性能列表、避免子组件重渲染
v-cloak编译完成前隐藏防止 Mustache 闪现（CDN 模式）

这些指令都是 Vue 提供的低开销、高价值的优化手段，合理使用可显著提升用户体验和性能。