Vue3 computed

computed 接收一个回调函数，返回一个通过其他属性经过计算的新值
并且这个新值是通过 ref 包装过的常量

在Vue3中基本使用如下:

setup() {
  const { computed, ref } = Vue;
  const name = ref(0)

  const newName = computed(() => {
     return name.value + 5     // 注意 ref 包装过的值在value中
  })

  return { newName }
}

也可以进行复杂计算

computed 也可以接收一个对象，这个对象可以接收 get 和 set 两个方法

setup() {
  const { computed, ref } = Vue;
  const name = ref(0)

  const newName = computed({
    get: () => {   // 3. 当 name 的值被修改后，触发 get 方法
      return name.value + 10  // 95 + 10 = 105，所以newName 的值是 105
    },
    set: ( param ) => {  // 2. 下方定时器中赋值的 100 ,会作为参数传递到 set 方法 ，
      name.value = param - 5  //   name.value 被修改 100 - 5 = 95 ，所以 name 的值是95
    },
  })

  setTimeout(() => {
    newName.value = 100
   },3000)  // 1. 三秒后给 newName 赋值

  return { newName } // 所有代码执行完毕之后 newName 的值是 105
}

上诉代码功能为三秒后给newName赋值，定时器中赋值的100，会作为参数传递到set方法，当name的值被修改后，触发get方法，最后的newName的值为105