vue3.0中的watch偵聽器實例詳解

Posted on by

前言

雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器。這就是為什麼 Vue 通過watch選項提供瞭一個更通用的方法，來響應數據的變化。當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。

偵聽器和計算屬性的區別

計算屬性裡不可以做異步操作，偵聽器可以做異步操作，相當於計算屬性的升級版

 

vue3如何使用watch呢？

基本使用

<template>
  <h1>watch偵聽器頁面</h1>
  <p>普通偵聽數據:{{ num }}</p>
  <button @click="butFn">點擊</button>
</template>

script

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

監聽多個響應式數據

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

偵聽reactive定義的響應式數據

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

總結：如果偵聽對象，那麼偵聽器的回調函數的兩個參數是一樣的結果，表示最新的對象數據，此時也可以直接讀取被偵聽的對象，那麼得到的值也是最新的。

監聽reactive定義的響應式數據的某一個屬性

	const obj = reactive({
      msg: '奇奇怪怪可可愛愛'
    })
    
	watch(() => obj.msg,(v1, v2) => {
        // v1 就是被監聽數據的最新值
        // v2 就是被監聽數據的原有值
        console.log(v1, v2)
        // 總結：如果偵聽對象中當個屬性，需要使用箭頭函數的方式
        // 偵聽更少的數據有利於提高性能
      }
    )

配置選項用法

   const obj = reactive({
      msg: {
        info: 'ooo'
      }
    })
   watch(() => obj.msg,(v1, v2) => {
        console.log(v1, v2)
      },
      {
        // 首次渲染組件就觸發一次
        immediate: true,
        // 開啟深度監聽,對象裡面的數據如果發生變化也會被偵聽到
        // 如果監聽的數據是一個比較長的表達式，那麼需要用一個函數的方式
        // 但是寫成函數形式之後，裡層的數據變化不到，所以需要添加deep選項
        deep: true
      }
    )

總結

到此這篇關於vue3.0中watch偵聽器實例詳解的文章就介紹到這瞭,更多相關vue3.0 watch偵聽器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：