Vue3中watch的用法與最佳實(shí)踐指南

目錄

前言🌟

本文以實(shí)驗的形式，為大家揭示Vue3中watch的最佳實(shí)踐。

這篇文章的主要目的是研究watch在監聽(tīng)響應式數據時(shí)，如何獲取當前值和先前值。順便給大家補習一下watch的用法，然后引出為了配合watch能獲取當前值和先前值，如何選用ref和reactive定義響應式數據。

一、API介紹

watch(WatcherSource, Callback, [WatchOptions])

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

interface WatchOptions extends WatchEffectOptions {
    deep?: boolean // 默認：false
  immediate?: boolean // 默認：false
  
}

參數說(shuō)明：

WatcherSource: 用于指定要偵聽(tīng)的響應式變量。WatcherSource可傳入ref響應式數據，reactive響應式對象要寫(xiě)成函數的形式。

Callback: 執行的回調函數，可依次接收當前值newValue，先前值oldValue作為入參。

WatchOptions：支持 deep、immediate。當需要對響應式對象進(jìn)行深度監聽(tīng)時(shí)，設置deep: true;默認情況下watch是惰性的，當我們設置immediate: true時(shí)，watch會(huì )在初始化時(shí)立即執行回調函數。

除此之外，vue3的watch還支持偵聽(tīng)多個(gè)響應式數據，也能手動(dòng)停止watch監聽(tīng)。

二、監聽(tīng)多個(gè)數據源

<template>
  <div class="watch-test">
    <div>name：{{name}}</div>
    <div>age：{{age}}</div>
  </div>
  <div>
    <button @click="changeName">改變名字</button>
    <button @click="changeAge">改變年齡</button>
  </div>
</template>

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

  export default {
    name: 'Home',
    setup() {

      const name = ref('小松菜奈')
      const age = ref(25)

      const watchFunc = watch([name, age], ([name, age], [prevName, prevAge]) => {
        console.log('newName', name, 'oldName', prevName)
        console.log('newAge', age, 'oldAge', prevAge)
        if (age > 26) {
          watchFunc() // 停止監聽(tīng)
        }
      },{immediate:true})

      const changeName = () => {
        name.value = '有村架純'
      }
      const changeAge = () => {
        age.value += 2
      }
      return {
        name,
        age,
        changeName,
        changeAge
      }
    }
  }
</script>

現象：當改變名字和年齡時(shí)，watch都監聽(tīng)到了數據的變化。當age大于26時(shí)，我們停止了監聽(tīng)，此時(shí)再改變年齡，由于watch的停止，導致watch的回調函數失效。

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

三、偵聽(tīng)數組

<template>
  <div class="watch-test">
    <div>ref定義數組：{{arrayRef}}</div>
    <div>reactive定義數組：{{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">改變r(jià)ef定義數組第一項</button>
    <button @click="changeArrayReactive">改變r(jià)eactive定義數組第一項</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，源不是函數
      const arrayReactiveWatch = watch(arrayReactive, (newValue, oldValue) => {
        console.log('newArrayReactiveWatch', newValue, 'oldArrayReactiveWatch', oldValue)
      })

      // 數組監聽(tīng)的最佳實(shí)踐- reactive且源采用函數式返回，返回拷貝后的數據
      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>

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

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

四、偵聽(tīng)對象

<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 源是函數
      const objReactiveWatch = watch(() => objReactive, (newValue, oldValue) => {
        console.log('objReactiveWatch')
        console.log('new:',JSON.stringify(newValue))
        console.log('old:',JSON.stringify(oldValue))
      })

      //reactive，源是函數，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})

      // 對象深度監聽(tīng)的最佳實(shí)踐- reactive且源采用函數式返回，返回深拷貝后的數據
      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>

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

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

五、總結✨

1.通常我們把原始類(lèi)型的數據（number、string等）定義為ref響應數據，引用類(lèi)型的數據（數組、對象）定義為reactive響應式數據；

2.當我們使用watch監聽(tīng)數據變化需要同時(shí)獲取新值和老值時(shí)，我們需要把數據源定義為函數的形式，并且把數據源進(jìn)行深拷貝返回。當我們只需要新值時(shí)，可以增加deep:true選項即可。
其實(shí)，引用類(lèi)型的數據定義為ref形式也沒(méi)關(guān)系，也只需要把數據源定義為函數的形式，并且把數據源進(jìn)行深拷貝返回，便可獲得新老值~哈哈哈哈哈哈哈哈哈哈哈哈哈哈，但我覺(jué)得最佳實(shí)踐還是要把引用類(lèi)型定義為reactive響應式數據。

到此這篇關(guān)于Vue3中watch的用法與最佳實(shí)踐指南的文章就介紹到這了,更多相關(guān)Vue3中watch用法內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！