Hi Dai Gei Ho~ 我是Winnie～

在今天文章中， 我們要來說的Composition API 中的 watch 與 watchEffect。首先我們先來說說 大家比較熟悉的 watch：

watch

在 Composition API 中 watch 的 主要作用 其實還是與 過去相同的，而在watch()用法上，需改為一個 函式 的語法來使用 。

用法如下：

<template>

  <div>
      {{name}} <button @click="setName">隱姓埋名</button>
  </div>
</template>

<script>
import {ref, reactive ,watch } from 'vue';

export default({
  setup() {
      const name =ref('winnie') 
      const setName = () => {
          name.value = '大俠愛吃漢堡飽'
      }
      
      //觀察一個ref物件
      watch(name, (val,oldVa)=>{
        console.log('newName:'${val},'oldName:'${oldVal});
      })
      return {
          name,
          setName,
      }
  }
});
</script>

預覽:

從上方我們可以看到，當我們監聽一個資料狀態時，watch()中第一個參數為觀察ref物件，第二個參數為一個callBack ，當狀態更新，就會針對其來執行callback。

如果是 reactive 中的其中一屬性呢？

我們可以將 watch()第一個參數改為 有回傳值的 getter函式，用法如下:

//略...
<script>
import {reactive,watch } from 'vue';

//略..
       const name = reactive({
         initName : 'winnie',
         setName: name.initName = '大俠愛吃漢堡飽'
      }) 
 
      watch(
      ()=> name.initName, // 觀察一個getter
      (name,oldName)=>{
            console.log('newName:'${val},'oldName:'${oldVal});
      })
//略..

觀察多筆 資料

如果今天有多筆資料需要 被觀察，我們可以透過 陣列的方式來帶入第一個參數之中，同時被觀察。

//略...
<script>
import {reactive,watch } from 'vue';

//略..
       const name = reactive({
         initName : 'winnie',
         setName: name.initName = '大俠愛吃漢堡飽',
         fakeName: 'Banana',
         setFake :  name.fakeName='你不是大俠吃香蕉'
      }) 
 
      watch(
      [()=> name.initName,()=> name.fakeName], //  使用陣列偵聽多筆
      ([name,fakeName],[oldName,oldFakeName])=>{
      
        console.log('Name:'+name,'oldName:'+oldName);
        console.log('fakeName:'+fakeName,'oldName:'+oldFakeName);
      })
//略..

預覽

這邊需注意 我們可以從console.log中看到，因為是多筆資料寫在一個 watch()之中，所以callback是共用的，如要執行不同動作，可以分開來寫。

另外如要針對 物件中的物件 做深層監聽，我們可以在 watch()第三個參數中 加上{deep:true}

// 略..
    watch(state.obj,(val,oldVal)=>{}, {deep:true});
//略..

watchEffect

接著我們要來說的是 在Vue3 Composition API 中 新增加的 API : watchEffect:

export default{
  setup(){
    const name =ref('winnie')
    const setName = ()=> name.value = '大俠愛吃漢堡飽'
    
    watchEffect(()=>{
        console.log(name.value)
    
    })
  }
}

從上我們可以看到 ，watchEffect()不用指定要監聽的目標，只要在callback函式中對應響應式資料更新後就會依照對應資料來執行了，而與 watch 不同的是，watchEffect()在初始setup()的時候，就會先執行一次了。

解除 watchEffect監聽

在每一個 watchEffect()中都會回傳一個專屬的 WachStopHandle 函式。如果想要停止監聽，可以直接呼叫其來停止監聽。

    
    const stop = watchEffect(()=>{
        console.log(name.value)
    })
    
    stop();

以上就是今天的文章，如有問題歡迎大家多多指教，謝謝。