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

Vue使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例

 更新時間：2023年05月31日 09:16:37   作者：灰太狼的情與殤  
這篇文章主要為大家介紹了Vue中使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

開發(fā)環(huán)境 vue2

電腦系統(tǒng) windows11專業(yè)版

在使用vue開發(fā)的過程中,我們有時候需要使用到監(jiān)聽watch來獲取對應(yīng)的數(shù)據(jù),接下來讓我們看一下使用方法和同時監(jiān)聽多個值的

使用方法

廢話不多說,直接上代碼:

watch:{
    "tempUrl"(newValue,oldValue){
            console.log("我是監(jiān)聽的新數(shù)據(jù)",newValue);
            console.log("我是監(jiān)聽的舊數(shù)據(jù)",oldValue);
        }
}

 這種寫法能監(jiān)聽多數(shù)據(jù)的變化,現(xiàn)在感覺是沒有問題的

//當(dāng)我需要監(jiān)聽多個值變化的時候
watch:{
"tempUrl"(newValue,oldValue){
    console.log("我是監(jiān)聽的新數(shù)據(jù)",newValue);
    console.log("我是監(jiān)聽的舊數(shù)據(jù)",oldValue);
 },
"tagNameLists"(newValue,oldValue){
    console.log("我是視頻標(biāo)簽顯示新數(shù)據(jù)",newValue);
    console.log("我是視頻標(biāo)簽顯示舊數(shù)據(jù)",oldValue);
    // this.getRdata(newValue);
 }
}

 //只觸發(fā)了第一個監(jiān)聽的數(shù)據(jù)變化,第二個數(shù)據(jù)變化沒有監(jiān)聽多,怎么解決呢?

使用computed

computed:{
        dataChange () {
            const {tempUrl, tagNameLists} = this;
            return {tempUrl, tagNameLists};
        }
    }
watch:{
        dataChange:{
            handler(newValue,oldValue) {
                console.log("監(jiān)聽到了數(shù)據(jù)的變化",newValue);
            },
            deep: true
        }
    },

 這樣就實現(xiàn)了監(jiān)聽多個數(shù)據(jù)變化

本期的分享到了這里就結(jié)束啦,希望對你有所幫助,讓我們一起努力走向巔峰。

以上就是Vue使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例的詳細(xì)內(nèi)容，更多關(guān)于Vue中 watch監(jiān)聽多值的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論