Vue 3.2+ 引入的指令 v-memo 性能优化

前言

v-memo 是 Vue 3.2+ 引入的指令，用于优化组件渲染性能，仅在依赖项变化时重新渲染该部分内容，避免不必要的虚拟 DOM 计算。

适用场景

• 复杂计算或大型列表：避免频繁重新渲染静态或低变化内容。
• 高频率更新组件：如实时数据展示，但部分内容无需同步更新时。
• 条件渲染优化：与 v-if 结合，减少不必要的 DOM 操作。

<template><div v-memo="[dependency1, dependency2]"><!-- 仅当 dependency1 或 dependency2 变化时才会重新渲染 -->{{ expensiveCalculation() }}</div>
</template>

• 依赖数组：数组内的值变化时触发重新渲染。若数组为空，则永不更新。
• 静态内容：若依赖项不变，即使父组件更新，子内容也不会重新渲染。

与 v-once 的区别

• v-once 渲染一次后永不更新，而 v-memo 可基于依赖动态控制更新。
• v-memo 更灵活，适合需要条件更新的场景。

注意事项

• 依赖项必须响应式：如 ref 或 reactive 值，否则无法触发更新。
• 避免过度使用：可能导致逻辑复杂化，优先考虑其他优化手段（如 computed）。
• 不适用于所有场景：频繁变动的依赖项可能使优化失效。

<script setup>
import { ref } from 'vue';
const count = ref(0);
const fixedValue = ref("Static");
</script><template><button @click="count++">Increment</button><div v-memo="[fixedValue]"><!-- 仅 fixedValue 变化时更新 -->{{ fixedValue }} - Count: {{ count }}</div>
</template>