快捷導(dǎo)航

詳解Vue3中Watch監(jiān)聽(tīng)事件的使用

更新時(shí)間：2023年02月10日 11:24:25 作者：山水有輕音

這篇文章主要為大家詳細(xì)介紹了Vue3中Watch監(jiān)聽(tīng)事件的使用的相關(guān)資料，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue3有一定的幫助，需要的可以參考一下

一、watch的使用

watch(WatcherSource, Callback, [WatchOptions])

type WatcherSource<T> = Ref<T> | (() => T)

interface WatchOptions extends WatchEffectOptions {

--     deep?: boolean  ``// 默認(rèn)：false`

--     immediate?: boolean  ``// 默認(rèn)：false`
}

參數(shù)說(shuō)明：

WatcherSource: 用于指定要偵聽(tīng)的響應(yīng)式變量。WatcherSource可傳入ref響應(yīng)式數(shù)據(jù)，reactive響應(yīng)式對(duì)象要寫(xiě)成函數(shù)的形式。
Callback: 執(zhí)行的回調(diào)函數(shù)，可依次接收當(dāng)前值newValue，先前值oldValue作為入?yún)ⅰ?/li>
WatchOptions：支持 deep、immediate。當(dāng)需要對(duì)響應(yīng)式對(duì)象進(jìn)行深度監(jiān)聽(tīng)時(shí)，設(shè)置deep: true;默認(rèn)情況下watch是惰性的，當(dāng)我們?cè)O(shè)置immediate: true時(shí)，watch會(huì)在初始化時(shí)立即執(zhí)行回調(diào)函數(shù)。
除此之外，vue3的watch還支持偵聽(tīng)多個(gè)響應(yīng)式數(shù)據(jù)，也能手動(dòng)停止watch監(jiān)聽(tīng)。

1、引入watch

import { watch } from 'vue'

然后在setup里注入監(jiān)聽(tīng)事件

setup(props){
         const state = reactive({ 
           count: 0 ,
           message:'Hellow world'
         });
         watch(state,()=>{
            console.log(state.count); --單個(gè)監(jiān)聽(tīng)
         })
         return {
           state,
         }
},

2、多個(gè)數(shù)據(jù)源監(jiān)聽(tīng)

<template>
 <div>
   age: {{obj1.age}}

   name: {{obj.name}}
   

   list:
   <ul>
     <li v-for="(item, index) in obj.list" :key="index"> {{item}} </li>
   </ul>
   <hr>
   <button @click="changeName">改變name</button>
   <button @click="changeList">改變list</button>
   <button @click="changeAge">改變age</button>
 </div>
</template>
<script lang="ts">
import {defineComponent, reactive, watch} from 'vue';
export default defineComponent({
 setup () {
   let obj = reactive({
     name: '1111',
     list: ['222', '222222', '222222']
   })
   let obj1 = reactive({
     age: 18
   })
   function changeName () {
     obj.name += '+'
   }

   function changeList () {
     obj.list[0] += '+'
   }

   function changeAge () {
     obj1.age++
   }

   watch([obj, obj1], () => {
     console.log(obj.name)
     if(obj.age>28){
         watchFunc()  // 停止監(jiān)聽(tīng)`
     }
   }, {
     // 頁(yè)面加載會(huì)先執(zhí)行一次
     immediate: true
   })

   return {
     obj,
     changeName,
     changeList,
     changeAge,
     obj1
   }
 }
})
</script>
<style scoped>
</style>

結(jié)果：當(dāng)改變名字和年齡時(shí)，watch都監(jiān)聽(tīng)到了數(shù)據(jù)的變化。當(dāng)age大于28時(shí)，我們停止了監(jiān)聽(tīng)，此時(shí)再改變年齡，由于watch的停止，導(dǎo)致watch的回調(diào)函數(shù)失效。

解決辦法：我們可以通過(guò)watch偵聽(tīng)多個(gè)值的變化，也可以利用給watch函數(shù)取名字，然后通過(guò)執(zhí)行名字()函數(shù)來(lái)停止偵聽(tīng)。

3、監(jiān)聽(tīng)數(shù)組變化

<template>
  <div class="watch-test">
    <div>ref定義數(shù)組：{{arrayRef}}</div>
    <div>reactive定義數(shù)組：{{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">改變r(jià)ef定義數(shù)組第一項(xiàng)</button>
    <button @click="changeArrayReactive">改變r(jià)eactive定義數(shù)組第一項(xiàng)</button>
  </div>
</template>

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

  export default {
    name: 'WatchTest',
    setup() {
      const arrayRef = ref([1, 2, 3, 4])
      const arrayReactive = reactive([1, 2, 3, 4])

      //ref not deep
      const arrayRefWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefWatch', newValue, 'oldArrayRefWatch', oldValue)
      })

      //ref deep
      const arrayRefDeepWatch = watch(arrayRef, (newValue, oldValue) => {
        console.log('newArrayRefDeepWatch', newValue, 'oldArrayRefDeepWatch', oldValue)
      }, {deep: true})

      //reactive，源不是函數(shù)
      const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', newValue, 'oldArrayReactiveWatch', oldValue)
      })

      // 數(shù)組監(jiān)聽(tīng)的最佳實(shí)踐- reactive且源采用函數(shù)式返回，返回拷貝后的數(shù)據(jù)
      const arrayReactiveFuncWatch = watch(() => [...arrayReactive], (newValue, oldValue) => {
        console.log('newArrayReactiveFuncWatch', newValue, 'oldArrayReactiveFuncWatch', oldValue)
      })

      const changeArrayRef = () => {
        arrayRef.value[0] = 6
      }
      const changeArrayReactive = () => {
        arrayReactive[0] = 6
      }
      return {
        arrayRef,
        arrayReactive,
        changeArrayRef,
        changeArrayReactive
      }
    }
  }
</script>

結(jié)果：當(dāng)將數(shù)組定義為響應(yīng)式數(shù)據(jù)ref時(shí)，如果不加上deep:true，watch是監(jiān)聽(tīng)不到值的變化的；而加上deep:true，watch可以檢測(cè)到數(shù)據(jù)的變化，但老值和新值一樣，即不能獲取老值。當(dāng)數(shù)組定義為響應(yīng)式對(duì)象時(shí)，不作任何處理，watch可以檢測(cè)到數(shù)據(jù)的變化，但老值和新值一樣；如果把watch的數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)擴(kuò)展運(yùn)算符克隆一份數(shù)組返回，就可以在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。

結(jié)論：定義數(shù)組時(shí)，最好把數(shù)據(jù)定義成響應(yīng)式對(duì)象reactive，這樣watch監(jiān)聽(tīng)時(shí)，只需要把數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)擴(kuò)展運(yùn)算符克隆一份數(shù)組返回，即可在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。

4、偵聽(tīng)對(duì)象

<template>
  <div class="watch-test">
    <div>user:{</div>
      <div>name:{{objReactive.user.name}}</div>
      <div>age:{{objReactive.user.age}}</div>
    <div>}</div>
    <div>brand:{{objReactive.brand}}</div>
    <div>
      <button @click="changeAge">改變年齡</button>
    </div>
  </div>
</template>

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

  export default {
    name: 'WatchTest',
    setup() {
      const objReactive = reactive({user: {name: '小松菜奈', age: '20'}, brand: 'Channel'})

      //reactive 源是函數(shù)
      const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      //reactive，源是函數(shù)，deep：true
      const objReactiveDeepWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      }, {deep: true})

      // 對(duì)象深度監(jiān)聽(tīng)的最佳實(shí)踐- reactive且源采用函數(shù)式返回，返回深拷貝后的數(shù)據(jù)
      const objReactiveCloneDeepWatch = watch(() => _.cloneDeep(objReactive), (newValue, oldValue) => {
        console.log('objReactiveCloneDeepWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      const changeAge = () => {
        objReactive.user.age = 26
      }

      return {
        objReactive,
        changeAge
      }
    }
  }
</script>

結(jié)果：當(dāng)把對(duì)象定義為響應(yīng)式對(duì)象reactive時(shí)，采用函數(shù)形式的返回，如果不加上deep:true，watch是監(jiān)聽(tīng)不到值的變化的；而加上deep:true，watch可以檢測(cè)到數(shù)據(jù)的變化，但老值和新值一樣，即不能獲取老值；若把watch的數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)深拷貝克?。ㄟ@里用了lodash庫(kù)的深拷貝）一份對(duì)象返回，就可以在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。

結(jié)論：定義對(duì)象時(shí)，最好把數(shù)據(jù)定義成響應(yīng)式對(duì)象reactive，這樣watch監(jiān)聽(tīng)時(shí)，只需要把數(shù)據(jù)源寫(xiě)成函數(shù)的形式并通過(guò)深拷貝克隆一份對(duì)象返回，即可在監(jiān)聽(tīng)的同時(shí)獲得新值和老值。

5、結(jié)論

1.通常我們把原始類型的數(shù)據(jù)（number、string等）定義為ref響應(yīng)數(shù)據(jù)，引用類型的數(shù)據(jù)（數(shù)組、對(duì)象）定義為reactive響應(yīng)式數(shù)據(jù)；
2.當(dāng)我們使用watch監(jiān)聽(tīng)數(shù)據(jù)變化需要同時(shí)獲取新值和老值時(shí)，我們需要把數(shù)據(jù)源定義為函數(shù)的形式，并且把數(shù)據(jù)源進(jìn)行深拷貝返回。當(dāng)我們只需要新值時(shí)，可以增加deep:true選項(xiàng)即可。
其實(shí)，引用類型的數(shù)據(jù)定義為ref形式也沒(méi)關(guān)系，也只需要把數(shù)據(jù)源定義為函數(shù)的形式，并且把數(shù)據(jù)源進(jìn)行深拷貝返回，便可獲得新老值~哈哈哈哈哈哈哈哈哈哈哈哈哈哈，但我覺(jué)得最佳實(shí)踐還是要把引用類型定義為reactive響應(yīng)式數(shù)據(jù)。

到此這篇關(guān)于詳解Vue3中Watch監(jiān)聽(tīng)事件的使用的文章就介紹到這了,更多相關(guān)Vue3 Watch監(jiān)聽(tīng)事件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: