快捷導(dǎo)航

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

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

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

immediate 和 handler

watch 的用法有個特點(diǎn)，就是當(dāng)值第一次綁定的時候，不會執(zhí)行監(jiān)聽函數(shù)，只有值發(fā)生改變才會執(zhí)行。如果我們需要在最初綁定值得時候也執(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ù)類型（對象）的改變時，普通的 watch 方法無法堅挺到對象內(nèi)部屬性的改變，此時就需要使用 deep 屬性對對象進(jìn)行深度監(jiān)聽。

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

watch深度監(jiān)聽，可以監(jiān)聽到對象中每個屬性的變化，但是會給對象的所有屬性都加上這個監(jiān)聽器，當(dāng)對象屬性較多時，每個屬性值得變化都會執(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動態(tài)修改對象中屬性值觸發(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)聽對象中某個屬性的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽對象屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: