在vue中使用computed来计算一个值，在react中使用useMemo。

相同点

• 都拥有缓存
• 当依赖值改变时改变
• 只读属性

• 不同点

• useMemo内部不能执行与渲染相关的操作，如useEffect等。
• computed 可以接收一个getters对象，有get，set属性。

举个栗子，相同的页面分别用vue和react实现

react代码

import {
    
     Button } from "antd" 
import {
    
     useMemo, useState } from "react"
export default function Test() {
    
    
  const [a, setA] = useState(0)
  const [b, setB] = useState(1)
  const c = useMemo(() => a + b, [a ,b])

  return (
    <div>
      <p>a: {
    
    a}   
      <Button type="primary" onClick={
    
    () => {
    
    setA(state => state + 1)}}>a+</Button>
      </p>
      <p>b: {
    
    b}
      <Button type="primary" onClick={
    
    () => {
    
    setB(state => state + 1)}}>b+</Button>
      </p>
      <p>c: {
    
    c}

      </p>
    </div>
  )
}

vue代码

<template>
  <div>
    <p>
      a: {
    
    {
    
     a }}
      <el-button type="primary" @click="() => a += 1">a+</el-button>
    </p>
    <p>
      b: {
    
    {
    
     b }}
      <el-button type="primary" @click="() => b += 1">b+</el-button>
    </p>
    <p>c: {
    
    {
    
     c }}</p>
  </div>
</template>

<script setup>
import {
    
     ref, computed } from 'vue'
let a = ref(0)
let b = ref(1)
let c = computed(() => a.value + b.value)

</script>