Vue 3 中的内置指令：v-memo

v-memo 是 Vue3 的内置指令，用于优化性能，通过缓存组件子树避免不必要的重新渲染。

其依赖项未变化时复用虚拟DOM，变化时才重新渲染。

适用于性能关键场景，如昂贵组件、频繁更新的列表（需配合 v-for）或表单输入优化。

Vue3.4+ 后需与 v-for 搭配使用，单独使用会触发警告。

注意事项包括合理选择依赖项、避免过度使用及配合 key 属性。

替代方案包括计算属性、<KeepAlive> 或组件拆分。

正确使用可显著提升性能，但需结合实际场景测试效果。

`v-memo`

v-memo 是 Vue 3 中的一个内置指令，用于有条件地缓存组件子树或元素，以避免不必要的重新渲染，从而优化性能。

基本语法

vue

复制代码

<div v-memo="[dependency]">
  <!-- 内容 -->
</div>

工作原理

当 v-memo 的依赖值没有改变时，Vue 会跳过整个子树的更新，复用之前的虚拟 DOM。只有当依赖值改变时，才会重新渲染。

使用示例

基本用法

vue

复制代码

<template>
  <div v-memo="[value]">
    <p>{{ value }}</p>
    <p>{{ computedValue }}</p>
  </div>
</template>

多个依赖

vue

复制代码

<template>
  <div v-memo="[user.id, user.name]">
    <UserProfile :user="user" />
  </div>
</template>

与 v-for 结合使用（性能优化）

vue

复制代码

<template>
  <div v-for="item in largeList" :key="item.id" v-memo="[item.id, item.name]">
    <ExpensiveComponent :item="item" />
  </div>
</template>

使用场景

1. 渲染昂贵的组件

vue

复制代码

<template>
  <ExpensiveChart 
    v-memo="[chartData, chartOptions]"
    :data="chartData" 
    :options="chartOptions"
  />
</template>

2. 频繁更新的列表项

vue

复制代码

<template>
  <div v-for="msg in messages" :key="msg.id" v-memo="[msg.id, msg.read]">
    <MessageItem :message="msg" />
  </div>
</template>

3. 表单输入优化

vue

复制代码

<template>
  <div v-memo="[formData]">
    <input v-model="formData.name" />
    <input v-model="formData.email" />
  </div>
</template>

注意事项

⚠️ 重要限制

必须与 v-for 一起使用 ：在 Vue 3.4+ 中，v-memo 单独使用（没有 v-for）已被废弃，会在控制台看到警告
仅用于性能关键场景：不要过度使用，大多数情况下 Vue 的响应式系统已经足够高效
正确的依赖项：确保包含所有可能影响渲染的响应式值

正确示例（Vue 3.4+）

vue

复制代码

<template>
  <!-- 正确：与 v-for 一起使用 -->
  <div v-for="item in items" :key="item.id" v-memo="[item.value]">
    {{ item.text }}
  </div>
</template>

错误示例

vue

复制代码

<template>
  <!-- 错误：Vue 3.4+ 会警告，单独使用 v-memo -->
  <div v-memo="[someValue]">
    {{ someContent }}
  </div>
</template>

性能对比

没有 v-memo

vue

复制代码

<template>
  <div v-for="item in 1000" :key="item.id">
    <!-- 每次父组件更新都会重新渲染 1000 次 -->
    <ExpensiveComponent :data="item" />
  </div>
</template>

使用 v-memo

vue

复制代码

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

最佳实践

只在性能瓶颈时使用 ：先用常规写法，遇到性能问题时再考虑 v-memo
合理选择依赖项：包含所有可能变化但又不希望触发重新渲染的值
配合 key 属性使用 ：特别是在 v-for 中
测试性能影响：使用前后进行性能测试，确保真正带来优化

替代方案

如果 v-memo 不适合你的场景，考虑：

计算属性：缓存计算结果
<KeepAlive>：缓存组件实例
手动记忆化 ：使用 computed 或第三方记忆化库
组件拆分：将频繁更新的部分拆分为子组件

总结

v-memo 是一个强大的性能优化工具，但需要谨慎使用。

在 Vue 3.4+ 中，它主要用于优化 v-for 渲染大型列表时的性能。

正确使用时可以显著减少不必要的渲染，提升应用性能。