今天來介紹 Vue3 的 computed 和 watch API

computed

computed API 有兩種使用方式：immutable、writable

immutable

只給 computed 一個 callback function 時，computed 回傳的是一個不可變的 ref 物件。

const name = ref('Peter')
const fullname = computed(() => name.value + ' Wang')

console.log(fullname.value) // 'Peter Wang'

fullname.value = 'Peter Lin' // 錯誤

writable

給 computed 一個物件並包含 set, get 方法時，則回傳一個可變的 ref 物件。

const count = ref(1)

const nextValue = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

nextValue.value = 1
console.log(count.value) // 0

watch

watch API 的第一個參數是依賴，第二個參數是 callback，依賴可以是一個 getter function、ref 物件、array of ref 物件，實際如下：

const state = reactive({ count: 0 })

// getter function
watch(
  () => state.count,
  (count, prevCount) => {
    // do something ...
  }
)

// watch ref 物件
const count = ref(0)
watch(count, (count, prevCount) => {
    // do something ...
})

// watch 多個 ref 物件，請注意 callback 的參數對應
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
    // do something ...
})