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