computed计算属性变化

由于vue3的正式版还未发布，官方文档还没有提供
参考外国友人的文档 vue-composition文档

Vue引入了Composition API（基于功能的API）作为当前基于Option的API的补充。
该API将随Vue 3一起发布
基于选项的API与组合API
当前基于选项的API概念与新的合成API（基于函数的API）概念的区别在于：
基于选项的API：组件包含属性/方法/选项的类型。
组合API：组件将逻辑封装到函数中。


computed
计算值的行为跟计算属性 (computed property) 一样：只有当依赖变化的时候它才会被重新计算。类型某act的useCallback useMemo
computed() 返回的是一个包装对象，它可以和普通的包装对象一样在 setup() 中被返回 ，也一样会在渲染上下文中被自动展开。

---

用法一：

Takes a getter function and returns an immutable reactive ref object for the returned value from the getter.
直接传一个函数,返回你所依赖的值的计算结果，这个值是个包装对象，默认情况下，如果用户试图去修改一个只读包装对象，会触发警告，只能获取不能设置

import { computed } from 'vue';
const App = {
  setup() {
    const count = ref(1);
    // computed() 函数的返回值是一个 ref 的实例
    // 根据 count 的值，创建一个响应式的计算属性 plusOne
    // 它会根据依赖的 ref 自动计算并返回一个新的 ref
    const plusOne = computed(() => count.value + 1);
    console.log(plusOne.value); // 2
    plusOne.value++; // 触发警告,默认情况下，如果用户试图去修改一个只读包装对象，会触发警告
  },
};

用法二：

Alternatively, it can take an object with get and set functions to create a writable ref object.<br />    在调用 computed() 函数期间，传入一个包含 get 和 set 函数的对象，可以得到一个可读可写的计算属性，示例代码如下：<br />

import { computed } from 'vue';
const App1 = {
  setup() {
    // 创建一个 ref 响应式数据
    const count = ref(1);
    // 创建一个 computed 计算属性
    const plusOne = computed({
      // 取值函数
      get: () => count.value + 1,
      // 赋值函数
      set: (val) => {
        count.value = val - 1;
      },
    });
    // 为计算属性赋值的操作，会触发 set 函数
    plusOne.value = 1;
    // 触发 set 函数后，count 的值会被更新
    console.log(count.value); // 0
  },
};

唯一不同的是，3.0中，computed 被抽成一个API，直接从vue中获取，
而Vue2.x中，computed是一个对象，在对象中定义一个个computed