react useMemo和vue3 computed对比

React useMemo

• 用途：主要用于记忆化计算结果，避免在每次渲染时都执行昂贵的计算。
• 使用方式：接受一个函数和一个依赖项数组作为参数。只有当依赖项数组中的值发生变化时，才会重新执行给定的函数并返回新的计算结果；否则，它将返回上一次计算的结果。
• 适用场景：优化性能，特别是在处理复杂或耗时的计算时。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Vue 3 computed

• 用途：用于创建基于其他响应式数据的计算属性，这些计算属性会根据其依赖的数据自动更新。
• 使用方式：可以定义 getter 函数，并且还可以选择性地提供 setter 函数以允许计算属性是可写的。
• 适用场景：简化模板逻辑，减少重复代码，以及提高应用性能通过缓存计算结果直到依赖项变化。

import { computed } from 'vue';

const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ');
  }
});

比较

虽然两者都可以用来优化性能，但它们的设计目标略有不同：

• useMemo 更加通用，适用于任何类型的计算结果的记忆化。
• computed 则专注于基于响应式数据的计算，通常用于简化视图层的逻辑表达。

此外，computed 可以拥有 getter 和 setter 方法，使其成为可写的计算属性，而 useMemo 返回的是不可变的结果，如果需要类似的功能，则可能需要结合 useState 和 useEffect 来实现。

总体而言都是可以缓存计算结果，避免不必要的重新计算，优化性能。