欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一文搞懂Vue中watch偵聽器的用法

 更新時間：2023年11月02日 09:56:30   作者：森呼吸。  
在Vue.js中,您可以使用watch選項來創(chuàng)建偵聽器,以偵聽特定屬性的變化,偵聽器可以在屬性發(fā)生變化時執(zhí)行相關(guān)的邏輯,本文給大家詳細講講Vue中watch偵聽器的用法,需要的朋友可以參考下

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

watch第一個參數(shù)監(jiān)聽源

watch第二個參數(shù)回調(diào)函數(shù)cb（newVal,oldVal）

watch第三個參數(shù)一個options配置項是一個對象{

immediate:true //是否立即調(diào)用一次

deep:true //是否開啟深度監(jiān)聽

flush:“pre” // 更新時機

}

flush配置項

presyncpost
組件更新前執(zhí)行（默認）強制效果始終同步觸發(fā)組件更新后執(zhí)行

1. 監(jiān)聽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)聽多個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);
})

2. 監(jiān)聽Reactive

使用reactive監(jiān)聽深層對象開啟和不開啟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)聽reactive 單一值

import { ref, watch ,reactive} from 'vue'

let message = reactive({
    name:"",
    name2:""
})

watch(()=>message.name, (newVal, oldVal) => {
    console.log('新的值----', newVal);
    console.log('舊的值----', oldVal);
}

以上就是一文搞懂Vue中watch偵聽器的用法的詳細內(nèi)容，更多關(guān)于Vue watch偵聽器的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論