Composition Api (九) watch

發表於 更新於 分類於
用watch 監測資料

使用watch

要使用watch方法，一樣先從vue中解構出來

監聽純值

上圖中，使用watch方法監聽 productName這個值，並在productName這個值更動時，將值寫回 watchText裡。

要注意的是，當今天監聽的是物件，如上圖person物件裡的值，要在第一個參數前方補上箭頭函式。

深層監聽

1
2
3
watch(product, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}, { deep: true });

當監聽的是整包物件時，要加上 { deep: true } ，來進行深層監聽。

多項目監聽

1
2
3
4
watch([productName, product], ([productNameVal, productVal], [productNamePre, productPre]) => {
  console.log('純值', productNameVal, productNamePre);
  console.log('物件', productVal, productPre);
}, { deep: true })

當同時監聽多個項目時，用陣列帶入參數。