Vue 3 Computed Properties 重點整理

基本用法

有時候會需要使用 reactive 物件來組成另外一個資料顯示，例如:「姓」跟「名」組成「全名」，可以使用 computed 方法印出組合後的結果

<script setup>
import { computed, ref } from 'vue'
const firstName = ref('Kuan')
const lastName = ref('Sheng')
const fullName = computed(() => firstName.value + ' ' + lastName.value)
</script>
<template>
  <div>
    <div>First Name: {{ firstName }}</div>
    <div>Last Name: {{ lastName }}</div>
    <div>Full Name: {{ fullName }}</div>
  </div>
</template>

computed 與一般方法的差異

computed 方法 return 出去的東西可以依照 reactive 物件做 caching，一般的方法如果沒有特別實作的話，則沒有 cache 功能

可寫入的 computed

參考底下範例，computed 可以透過 setter 設定 firstName 與 lastName 的 ref value

<script setup>
import { computed, ref } from 'vue'
const firstName = ref('Kuan')
const lastName = ref('Sheng')
const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
const change = () => fullName.value = 'Someone Else'
</script>
<template>
  <div>
    <div>First Name: {{ firstName }}</div>
    <div>Last Name: {{ lastName }}</div>
    <div>Full Name: {{ fullName }}</div>
<button @click="change">change First Name and Last Name</button>
  </div>
</template>

最佳實踐

Computed 當 getters 用時要避免 side effect

例如非同步請求或修改 dom，此類有 side effect 的行為不應在 computed 的 getter 裡面做

避免修改 computed 產生的結果

因為 computed 本來就會依照 reactive 物件計算出結果，直接修改計算後的結果是沒有意義的

參考連結:

https://vuejs.org/guide/essentials/computed.html