快捷導(dǎo)航

vue中watch監(jiān)聽對(duì)象中某個(gè)屬性的方法

更新時(shí)間：2023年04月25日 15:56:18 作者：不二臣_

watch 的用法有個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行，如果我們需要在最初綁定值得時(shí)候也執(zhí)行函數(shù)，就需要用到 immediate 屬性，這篇文章主要介紹了vue中watch監(jiān)聽對(duì)象中某個(gè)屬性的方法,需要的朋友可以參考下

immediate 和 handler

watch 的用法有個(gè)特點(diǎn)，就是當(dāng)值第一次綁定的時(shí)候，不會(huì)執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會(huì)執(zhí)行。如果我們需要在最初綁定值得時(shí)候也執(zhí)行函數(shù)，就需要用到 immediate 屬性。

'currentParams.selOrgId': {
    handler(newV, oldV) {
        console.log("watch", newV, oldV)
    },
    immediate: true
}

deep 深度監(jiān)聽

當(dāng)需要監(jiān)聽復(fù)雜的數(shù)據(jù)類型（對(duì)象）的改變時(shí)，普通的 watch 方法無法堅(jiān)挺到對(duì)象內(nèi)部屬性的改變，此時(shí)就需要使用 deep 屬性對(duì)對(duì)象進(jìn)行深度監(jiān)聽。

currentParams: {
    handler (newV, oldV) {
        console.log('watch深度監(jiān)聽：', newV, oldV);
    },
    deep: true
}

watch深度監(jiān)聽，可以監(jiān)聽到對(duì)象中每個(gè)屬性的變化，但是會(huì)給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽器，當(dāng)對(duì)象屬性較多時(shí)，每個(gè)屬性值得變化都會(huì)執(zhí)行 handler 。

以currentParams為例，監(jiān)聽selOrgId屬性

data(){
    return {
        currentParams: {
            selOrgId: '1'
        },
    }
}

1.通過input輸入框觸發(fā)watch

<input v-model="currentParams.selOrgId" />
 
data(){
    return {
        currentParams: {
            selOrgId: '1',//聲明不聲明都可以觸發(fā)watch
        },
    }
},
 
watch: {
    'currentParams.selOrgId': (newV, oldV) => {
        console.log("watch", newV, oldV)
    },
},

2.通過js動(dòng)態(tài)修改對(duì)象中屬性值觸發(fā)watch

data(){
    return {
        currentParams: {
            
        },
    }
},
 
watch: {
    'currentParams.selOrgId': (newV, oldV) => {
        console.log("watch", newV, oldV)
    },
},
methods: {
    triggerWatch () {
        方法一、要監(jiān)聽的屬性值（currentParams.selOrgId）不需要事先聲明
        this.currentParams=Object.assign({}, this.currentParams, {selOrgId:                               
        "改變后的值"});
 
        方法二、要監(jiān)聽的屬性值（currentParams.selOrgId）不需要事先聲明
        this.$set(this.currentParams,'selOrgId',"改變后的值")
 
        方法三、要監(jiān)聽的屬性值（currentParams.selOrgId）需要事先聲明，否則監(jiān)聽不到
        this.currentParams.selOrgId = "改變后的值";
    }
}

到此這篇關(guān)于vue中watch監(jiān)聽對(duì)象中某個(gè)屬性的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽對(duì)象屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: