vue中watch監聽對象中某個屬性的方法

Posted on by

immediate 和 handler

watch 的用法有個特點，就是當值第一次綁定的時候，不會執行監聽函數，隻有值發生改變才會執行。如果我們需要在最初綁定值得時候也執行函數，就需要用到 immediate 屬性。

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

deep 深度監聽

當需要監聽復雜的數據類型（對象）的改變時，普通的 watch 方法無法堅挺到對象內部屬性的改變，此時就需要使用 deep 屬性對對象進行深度監聽。

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

watch深度監聽 ，可以監聽到對象中每個屬性的變化，但是會給對象的所有屬性都加上這個監聽器，當對象屬性較多時，每個屬性值得變化都會執行 handler 。

以currentParams為例，監聽selOrgId屬性

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

1.通過input輸入框觸發watch

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

2.通過js動態修改對象中屬性值觸發watch

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

到此這篇關於vue中watch監聽對象中某個屬性的文章就介紹到這瞭,更多相關vue watch監聽對象屬性內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：