在一个性能敏感的 Vue 3 应用中，你有一个组件渲染一个大

  v-memo 是 Vue 3.2+ 引入的内置指令，用于有条件地跳过子树的更新，是一种手动的渲染优化手段。
  接收一个依赖数组，只有数组中的值发生变化时，才重新渲染该元素及其子树。依赖未变化时，直接复用上次的 VNode，跳过 diff 和重新渲染。

  <div v-memo="[a, b]">
    <!-- 只有 a 或 b 变化时才重新渲染 -->
  </div>

  典型用法：

  1. 优化大列表（最主要的使用场景）
  与 v-for 配合，避免列表中未变化的项重新渲染：

  <ul>
    <li
      v-for="item in list"
      :key="item.id"
      v-memo="[item.selected, item.name]"
    >
      <span>{{ item.name }}</span>
      <input v-model="item.value" />
      <span :class="{ active: item.selected }">选中</span>
    </li>
  </ul>

  ▎ 每次只有 selected 或 name 变化的 <li> 才会重新渲染，其余直接跳过。

  2. 配合 v-for 的注意点
  v-memo 必须和 :key 写在同一元素上：

  <!-- 正确 -->
  <div v-for="item in list" :key="item.id" v-memo="[item.id, item.done]">

  <!-- 错误：key 和 memo 分离 -->
  <template v-for="item in list" :key="item.id">
    <div v-memo="[item.done]">  <!-- 不要这样写 -->

  3. 传空数组 = 永不更新（相当于 v-once）

  <div v-memo="[]">
    <!-- 只渲染一次，之后永远不更新 -->
    {{ staticContent }}
  </div>

  - 不要滥用：只在确认有性能问题时使用，过度使用会让代码难以理解
  - 依赖必须完整：遗漏依赖项会导致视图不更新的 bug（类似 useEffect 的依赖陷阱）
  - 不适合小列表：列表项少时，memo 的比较开销可能比重新渲染还大
 总结：
  v-memo 的核心价值在于超大列表的性能优化（数百到数千项），普通场景下 Vue 的响应式系统已经足够高效，不需要手动干预。