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

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

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

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

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

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

watch第三個(gè)參數(shù)一個(gè)options配置項(xiàng)是一個(gè)對(duì)象{

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

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

flush:“pre” // 更新時(shí)機(jī)

}

flush配置項(xiàng)

presyncpost
組件更新前執(zhí)行（默認(rèn)）強(qiáng)制效果始終同步觸發(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)聽多個(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);
})

2. 監(jiān)聽Reactive

使用reactive監(jiān)聽深層對(duì)象開啟和不開啟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偵聽器的用法的詳細(xì)內(nèi)容，更多關(guān)于Vue watch偵聽器的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論