快捷導(dǎo)航

vue3.0中的watch偵聽(tīng)器實(shí)例詳解

更新時(shí)間：2021年10月09日 11:07:53 作者：Youyzq

雖然計(jì)算屬性在大多數(shù)情況下更合適,但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器,這就是為什么Vue通過(guò)watch選項(xiàng)提供了一個(gè)更通用的方法,來(lái)響應(yīng)數(shù)據(jù)的變化,這篇文章主要給大家介紹了關(guān)于vue3.0中watch偵聽(tīng)器的相關(guān)資料,需要的朋友可以參考下

前言

雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器。這就是為什么 Vue 通過(guò)watch選項(xiàng)提供了一個(gè)更通用的方法，來(lái)響應(yīng)數(shù)據(jù)的變化。當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷較大的操作時(shí)，這個(gè)方式是最有用的。

偵聽(tīng)器和計(jì)算屬性的區(qū)別

計(jì)算屬性里不可以做異步操作，偵聽(tīng)器可以做異步操作，相當(dāng)于計(jì)算屬性的升級(jí)版

vue3如何使用watch呢？

基本使用

<template>
  <h1>watch偵聽(tīng)器頁(yè)面</h1>
  <p>普通偵聽(tīng)數(shù)據(jù):{{ num }}</p>
  <button @click="butFn">點(diǎn)擊</button>
</template>

script

import { ref, watch } from 'vue'
// 記得用到什么就要導(dǎo)入什么vue3的新特性，按需調(diào)用
 setup() {
 
    const num = ref(0)
    // watch(要偵聽(tīng)的數(shù)據(jù),回調(diào)函數(shù))
    watch(num, (v1, v2) => {
      // v1 是改變以后的新值
      // v2 是改變前的值
      console.log(v1, v2)
      // 要點(diǎn)：偵聽(tīng)普通函數(shù)可以獲取修改前后的值，被偵聽(tīng)的數(shù)據(jù)必須是響應(yīng)式的
    })
    
    // 單機(jī)事件
      const butFn = () => {
      num.value++
    }
    
     return { butFn, num }
}

監(jiān)聽(tīng)多個(gè)響應(yīng)式數(shù)據(jù)

    const num = ref(0)
    const num2 = ref(20)
    
    watch([num, num2], (v1, v2) => {
      // 存入的結(jié)果是一個(gè)數(shù)組，結(jié)果返回的也是一個(gè)已數(shù)組格式的結(jié)果
      // v1是最新結(jié)果的數(shù)組
      // v2是舊數(shù)據(jù)的數(shù)組
      console.log('v1', v1, 'v2', v2)
    // 總結(jié)：可以得到更新前后的值，偵聽(tīng)的結(jié)果也是數(shù)組數(shù)據(jù)順序一致
    })

偵聽(tīng)reactive定義的響應(yīng)式數(shù)據(jù)

	const obj = reactive({
      msg: '奇奇怪怪可可愛(ài)愛(ài)'
    })
    
   watch(obj, () => {
      // 只能獲取到最新的值
      console.log(obj.msg)
    })

總結(jié)：如果偵聽(tīng)對(duì)象，那么偵聽(tīng)器的回調(diào)函數(shù)的兩個(gè)參數(shù)是一樣的結(jié)果，表示最新的對(duì)象數(shù)據(jù)，此時(shí)也可以直接讀取被偵聽(tīng)的對(duì)象，那么得到的值也是最新的。

監(jiān)聽(tīng)reactive定義的響應(yīng)式數(shù)據(jù)的某一個(gè)屬性

	const obj = reactive({
      msg: '奇奇怪怪可可愛(ài)愛(ài)'
    })
    
	watch(() => obj.msg,(v1, v2) => {
        // v1 就是被監(jiān)聽(tīng)數(shù)據(jù)的最新值
        // v2 就是被監(jiān)聽(tīng)數(shù)據(jù)的原有值
        console.log(v1, v2)
        // 總結(jié)：如果偵聽(tīng)對(duì)象中當(dāng)個(gè)屬性，需要使用箭頭函數(shù)的方式
        // 偵聽(tīng)更少的數(shù)據(jù)有利于提高性能
      }
    )

配置選項(xiàng)用法

   const obj = reactive({
      msg: {
        info: 'ooo'
      }
    })
   watch(() => obj.msg,(v1, v2) => {
        console.log(v1, v2)
      },
      {
        // 首次渲染組件就觸發(fā)一次
        immediate: true,
        // 開(kāi)啟深度監(jiān)聽(tīng),對(duì)象里面的數(shù)據(jù)如果發(fā)生變化也會(huì)被偵聽(tīng)到
        // 如果監(jiān)聽(tīng)的數(shù)據(jù)是一個(gè)比較長(zhǎng)的表達(dá)式，那么需要用一個(gè)函數(shù)的方式
        // 但是寫成函數(shù)形式之后，里層的數(shù)據(jù)變化不到，所以需要添加deep選項(xiàng)
        deep: true
      }
    )