詳解Vue3中的watch偵聽器和watchEffect高級偵聽器

Posted on by

1watch偵聽器

watch 需要偵聽特定的數據源，並在單獨的回調函數中執行副作用

  • watch第一個參數監聽源
  • watch第二個參數回調函數cb（newVal,oldVal）
  • watch第三個參數一個options配置項是一個對
    • 　　{
    • 　　immediate:true //是否立即調用一次
    • 　　deep:true //是否開啟深度監聽
    • 　　}

監聽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

監聽多個ref 註意變成數組：

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

監聽Reactive：使用reactive監聽深層對象開啟和不開啟deep 效果一樣

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

監聽reactive 單一值

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

2watchEffect高級偵聽器

立即執行傳入的一個函數，同時響應式追蹤其依賴，並在其依賴變更時重新運行該函數。如果用到message 就隻會監聽message 就是用到幾個監聽幾個 而且是非惰性 會默認調用一次。

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

清除副作用：就是在觸發監聽之前會調用一個函數可以處理你的邏輯例如防抖

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 返回一個函數 調用之後將停止更新

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

到此這篇關於Vue3中的watch偵聽器和watchEffect高級偵聽器的文章就介紹到這瞭,更多相關Vue3watch偵聽器和watchEffect偵聽器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：