react 和vue 计算属性的异同

在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>