1、computed

• 当我们的某些属性是依赖其他状态时，我们可以使用计算属性来处理

2、如何使用computed呢？

• 方式一：接收一个getter函数，并为 getter 函数返回的值，返回一个不变的 ref 对象；
• 方式二：接收一个具有 get 和 set 的对象，返回一个可变的（可读写）ref 对象
• 使用：①先引入computed；②写在setup内部

// computed 计算属性
  const app = Vue.createApp({
    setup() {
      const { reactive, computed } = Vue;
      const countObj = reactive({ count: 0});
      const handleClick = () => {
        countObj.count += 1;
      }
      let countAddFive = computed({
        get: () => {
          return countObj.count + 5;
        },
        set: (param) => {
          countObj.count = param - 5;
        }
      })

      setTimeout(() => {
        countAddFive.value = 100;
      }, 3000)

      return { countObj, countAddFive, handleClick }
    },
    template: `
      <div>
        <span @click="handleClick">{{countObj.count}}</span> -- {{countAddFive}}
      </div>
    `,
  });
  
  const vm = app.mount('#root');

3、计算属性两种用法

• 给computed传入函数，返回值就是计算属性的值。
• 给computed传入对象，get获取计算属性的值，set监听计算属性改变。这种写法适用于需要读写计算属性的情况。