vue中watch監(jiān)聽方法有哪些

這篇文章主要為大家展示了“vue中watch監(jiān)聽方法有哪些”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“vue中watch監(jiān)聽方法有哪些”這篇文章吧。

1.vue中的watch作用就如其命名就是監(jiān)聽的作用

比如有個對象：

watchData: {
    name: '',
    age: '',
}

2.監(jiān)聽這個對象的屬性

watchData: {
    handler: function() {
        console.log();
    },
    deep: true
}

監(jiān)聽對象可以用deep，深度監(jiān)測，不然監(jiān)測不到對象的變化

3.監(jiān)聽這個對象的屬性

方式一：

watch: {
 'watchData.name'(newValue, oldValue) {
     console.log(newValue);
 }
}

方式二：

watch: {
    'watchData.name': {
        handler: function() {
            console.log();
        }
    }
},

為什么要監(jiān)聽對象的屬性，監(jiān)聽對象的話，一旦對象內部的任何數據變化，都會導致watch重新執(zhí)行，這樣的話可能不是你想要的監(jiān)聽某一個屬性變化才執(zhí)行watch，或者是一旦說對象內部任何一個屬性變化就讓其watch執(zhí)行，也會對性能有一定性的損耗，所以我們用這種監(jiān)聽對象單個屬性的方式來處理，給要監(jiān)聽的“對象.屬性，用引號包裹起來”

4.監(jiān)聽這個對象的屬性

computed: {
    getName() {
        return this.watchData.name 
    }
},
watch: {
    getName(newValue, oldValue) {
        console.log(newValue);
    }
},

這種方式其實和第二種是一樣的，區(qū)別就是用到了computed，然后再監(jiān)聽方法getName，實際上方法getName返回的就是watchData對象中的name屬性

以上是“vue中watch監(jiān)聽方法有哪些”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業(yè)資訊頻道！