快捷導(dǎo)航

vue?watch監(jiān)聽方法總結(jié)

更新時間：2022年05月08日 17:26:53 作者：前端小彭

這篇文章主要給大家分享的是vue?watch監(jiān)聽方法總結(jié)，偵聽器一般來說是用來監(jiān)聽數(shù)據(jù)的變化，默認(rèn)是在數(shù)據(jù)發(fā)生變化時執(zhí)行。監(jiān)聽的數(shù)據(jù)名放到這里面作為函數(shù)名，這個函數(shù)里面有兩個參數(shù)，一個是新值，一個是舊值。下面我們就一起進(jìn)入文章了解更具體的內(nèi)容吧

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

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

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

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

到此這篇關(guān)于vue watch監(jiān)聽方法總結(jié)的文章就介紹到這了,更多相關(guān)vue watch監(jiān)聽方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: