Day_20 : 让 Vite 来开启你的Vue 之 watch & watchEffect

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();

以上就是今天的文章，如有问题欢迎大家多多指教，谢谢。