react的useMemo 和 vue3的computed

react useMemo

  const total = useMemo(() => { 
    return number * state
  }, [number, state])

vue3 computed

const total = computed(() => {
  return number * state
})

两者都会根据number 和 state的改变而改变total，都是计算属性，都返回一个计算后的值。

computed：可写计算属性

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

setTimeout(() => {
  fullName.value = 'Mo Sowe'
}, 2000);

两秒后，firstName = Mo，lastName = Sowe。

通过在computed内的set/get来创建一个可写的计算属性。