vue全家桶進階之路33：Vue3 計算屬性computed

在Vue3中，計算屬性可以使用computed函數來定義。

computed函數接受兩個參數：第一個參數是一個函數，該函數返回計算屬性的值；第二個參數是一個可選的配置對象，可以包含getter和setter函數，以及控制計算屬性緩存的緩存配置。

Vue3中的計算屬性與Vue2中的計算屬性相比有以下幾個變化：

1. 使用computed函數 Vue3中使用computed函數來定義計算屬性，而不是Vue2中使用computed屬性。

2. 支持ref和reactive響應式對象 Vue3中的計算屬性不僅支持data對象上的響應式屬性，還支持ref和reactive響應式對象。

3. 計算屬性不再是組件選項 Vue3中的計算屬性不再作為組件選項，而是在setup()函數中定義。

4. 更好的性能 Vue3中的計算屬性與Vue2相比具有更好的性能。Vue3通過使用基於Proxy的響應式系統，優化了計算屬性的性能。此外，Vue3還引入了緩存策略，以避免計算屬性的重覆計算。

下麵是一個使用Vue3中的computed函數定義計算屬性的示例：

import { computed, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => `${state.firstName} ${state.lastName}`);

    return { fullName };
  }
};

在這個例子中，state對象是使用reactive函數定義的響應式對象。fullName計算屬性的值是通過連接state.firstName和state.lastName獲得的。請註意，fullName計算屬性是在setup函數中定義的。

你可以在模板中使用fullName計算屬性：

<template>
  <div>{{ fullName }}</div>
</template>

每當state.firstName或state.lastName發生更改時，fullName計算屬性的值將重新計算。這是因為Vue會自動追蹤state.firstName和state.lastName的依賴關係，併在依賴項發生更改時重新計算計算屬性的值。

以下是一個使用computed函數定義計算屬性的非常基本的操作示例：

<script>
import { computed } from "vue";
export default {
  setup() {
    const firstName = "John";
    const lastName = "Doe";
    const fullName = computed(() => `${firstName} ${lastName}`);
    return { fullName };
  },
};
</script>

在這個例子中，fullName計算屬性的值是通過將firstName和lastName連接起來獲得的。註意，由於Vue3使用了Composition API，因此計算屬性是在setup函數中定義的。

可以在模板中使用fullName計算屬性：

<template>
  <div>{{ fullName }}</div>
</template>

每當firstName或lastName發生更改時，fullName計算屬性的值將重新計算。這是因為Vue會自動追蹤firstName和lastName的依賴關係，併在依賴項發生更改時重新計算計算屬性的值。

以下是另一個示例：

<template>
  <div>{{ num1 }}---{{ num2 }}---{{ num3 }}</div>
  <button @click="add">add</button>
</template>
<script>
import { defineComponent, computed, ref } from "vue";

export default defineComponent({
  setup() {
    let num1 = ref(10);
    let num2 = ref(11);
    let num3 = computed(() => {
      return num1.value + num2.value;
    });
    let add = () => {
      num1.value++;
    };
    return {
      num1,
      num2,
      num3,
      add,
    };
  },
});
</script>