本篇內(nèi)容主要講解“Vue3中watch如何使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Vue3中watch如何使用”吧!

創(chuàng)新互聯(lián)是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、成都小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10多年以來，已經(jīng)為上千家成都自拌料攪拌車各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)。現(xiàn)在，服務(wù)的上千家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

一、API介紹

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ù)說明：

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

Callback: 執(zhí)行的回調(diào)函數(shù)，可依次接收當(dāng)前值newValue，先前值oldValue作為入?yún)ⅰ?/p>

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

除此之外，vue3的watch還支持偵聽多個響應(yīng)式數(shù)據(jù)，也能手動停止watch監(jiān)聽。

二、監(jiān)聽多個數(shù)據(jù)源

<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() // 停止監(jiān)聽
        }
      },{immediate:true})

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

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

結(jié)論：我們可以通過watch偵聽多個值的變化，也可以利用給watch函數(shù)取名字，然后通過執(zhí)行名字()函數(shù)來停止偵聽。

三、偵聽數(shù)組

<template>
  <div class="watch-test">
    <div>ref定義數(shù)組：{{arrayRef}}</div>
    <div>reactive定義數(shù)組：{{arrayReactive}}</div>
  </div>
  <div>
    <button @click="changeArrayRef">改變ref定義數(shù)組第一項</button>
    <button @click="changeArrayReactive">改變reactive定義數(shù)組第一項</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)聽的最佳實踐- 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>

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

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

四、偵聽對象

<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})

      // 對象深度監(jiān)聽的最佳實踐- 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>

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

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

到此，相信大家對“Vue3中watch如何使用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

當(dāng)前名稱：Vue3中watch如何使用
文章網(wǎng)址：http://www.chinadenli.net/article14/pejege.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、ChatGPT、建站公司、、響應(yīng)式網(wǎng)站、微信公眾號

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)