概述
React 的 useMemo 和 Vue 的 computed 都用于优化性能，避免不必要的重复计算。虽然它们的实现方式不同，但核心思想是一致的。
功能对比
React useMemo
import React, { useState, useMemo } from 'react';
const MyComponent: React.FC = () => {
const [count, setCount] = useState(0);
const [expensiveValue, setExpensiveValue] = useState(1000);
// 使用 useMemo 记忆化计算结果
const memoizedResult = useMemo(() => {
console.log('执行昂贵的计算...');
return expensiveValue * 2 + count;
}, [expensiveValue, count]); // 依赖数组
return (
<div>
<p>计算结果: {memoizedResult}</p>
<button onClick={() => setCount(count + 1)}>
增加计数 (触发重新渲染)
</button>
</div>
);
};
Vue 3 Composition API (computed)
<template>
<div>
<p>计算结果: {{ memoizedResult }}</p>
<button @click="count++">
增加计数 (触发重新渲染)
</button>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
const count = ref(0);
const expensiveValue = ref(1000);
// 使用 computed 计算属性
const memoizedResult = computed(() => {
console.log('执行昂贵的计算...');
return expensiveValue.value * 2 + count.value;
});
</script>
Vue 2 Options API (computed)
<template>
<div>
<p>计算结果: {{ memoizedResult }}</p>
<button @click="count++">
增加计数 (触发重新渲染)
</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
expensiveValue: 1000
};
},
computed: {
// 计算属性会自动缓存结果
memoizedResult() {
console.log('执行昂贵的计算...');
return this.expensiveValue * 2 + this.count;
}
}
};
</script>
主要差异
特性
React useMemo
Vue computed
语法
Hook 函数
计算属性
依赖管理
手动指定依赖数组
自动追踪依赖
缓存策略
基于依赖数组变化
基于响应式数据变化
使用场景
需要精确控制依赖
自动响应式更新
性能开销
需要手动管理依赖
自动优化
性能优化建议
React useMemo 最佳实践
-
✅ 用于昂贵的计算
-
✅ 用于避免子组件不必要的重新渲染
-
✅ 确保依赖数组包含所有必要项
-
❌ 不要过度使用，useMemo 本身也有开销
-
❌ 对于简单计算，直接计算更好
Vue computed 最佳实践
-
✅ 用于需要缓存的计算结果
-
✅ 用于派生状态
-
✅ 自动优化，无需手动管理依赖
-
❌ 避免在 computed 中产生副作用
-
❌ 避免过于复杂的计算逻辑
总结
框架
优势
劣势
React useMemo
精确控制依赖、灵活性高
需要手动管理依赖、容易出错
Vue computed
自动依赖追踪、语法简洁
依赖自动追踪可能带来意外行为
两者都是优秀的性能优化工具，选择哪个主要取决于你的项目框架和具体需求。
