快捷導(dǎo)航

詳解Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器

更新時(shí)間：2022年08月06日 10:27:28 作者：LotusFlower

這篇文章主要介紹了Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1watch偵聽(tīng)器

watch 需要偵聽(tīng)特定的數(shù)據(jù)源，并在單獨(dú)的回調(diào)函數(shù)中執(zhí)行副作用

watch第一個(gè)參數(shù)監(jiān)聽(tīng)源
watch第二個(gè)參數(shù)回調(diào)函數(shù)cb（newVal,oldVal）
watch第三個(gè)參數(shù)一個(gè)options配置項(xiàng)是一個(gè)對(duì)
- 　　{
- 　　immediate:true //是否立即調(diào)用一次
- 　　deep:true //是否開(kāi)啟深度監(jiān)聽(tīng)
- 　　}

監(jiān)聽(tīng)Ref 案例：

import { ref, watch } from 'vue'
  
let message = ref({
    nav:{
        bar:{
            name:""
        }
    }
})
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
},{
    immediate:true,
    deep:true

監(jiān)聽(tīng)多個(gè)ref 注意變成數(shù)組：

import { ref, watch ,reactive} from 'vue'
let message = ref('')
let message2 = ref('')
  
watch([message,message2], (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
})

監(jiān)聽(tīng)Reactive：使用reactive監(jiān)聽(tīng)深層對(duì)象開(kāi)啟和不開(kāi)啟deep 效果一樣

import { ref, watch ,reactive} from 'vue'
let message = reactive({
    nav:{
        bar:{
            name:""
        }
    }
})
watch(message, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
})

監(jiān)聽(tīng)reactive 單一值

import { ref, watch ,reactive} from 'vue'
let message = reactive({
    name:"",
    name2:""
})
watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
})

2watchEffect高級(jí)偵聽(tīng)器

立即執(zhí)行傳入的一個(gè)函數(shù)，同時(shí)響應(yīng)式追蹤其依賴(lài)，并在其依賴(lài)變更時(shí)重新運(yùn)行該函數(shù)。如果用到message 就只會(huì)監(jiān)聽(tīng)message 就是用到幾個(gè)監(jiān)聽(tīng)?zhēng)讉€(gè) 而且是非惰性會(huì)默認(rèn)調(diào)用一次。

let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect(() => {
    //console.log('message', message.value);
    console.log('message2', message2.value);
})

清除副作用：就是在觸發(fā)監(jiān)聽(tīng)之前會(huì)調(diào)用一個(gè)函數(shù)可以處理你的邏輯例如防抖

import { watchEffect, ref } from 'vue'
let message = ref<string>('')
let message2 = ref<string>('')
 watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
         
    })
    console.log('message2', message2.value);
})

停止跟蹤 watchEffect 返回一個(gè)函數(shù) 調(diào)用之后將停止更新

const stop =  watchEffect((oninvalidate) => {
    //console.log('message', message.value);
    oninvalidate(()=>{
  
    })
    console.log('message2', message2.value);
},{
    flush:"post",// pre:組件更新前執(zhí)行;sync:強(qiáng)制效果始終同步觸發(fā),post:組件更新后執(zhí)行
    onTrigger () { //onTrigger  可以幫助我們調(diào)試 watchEffect
  
    }
})
stop()

到此這篇關(guān)于Vue3中的watch偵聽(tīng)器和watchEffect高級(jí)偵聽(tīng)器的文章就介紹到這了,更多相關(guān)Vue3watch偵聽(tīng)器和watchEffect偵聽(tīng)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: