vue--監聽器

vue當中的屬性，偵聽器watch

computed可以根據數據的變化而變化，而watch也具備同樣的功能

既然這么相似，那么兩者的區別是什么呢

 

首先是執行順序上有一些細微差別，dom加載完成后將立即執行computed再watch

觸發事件后，若有methods則先執行再watch

其次watch是更通用的響應數據變化的屬性，如果數據變化是異步的，用watch較合適

 

接下來了解下該如何使用吧

<div id="nieo">
    <input v-model="year">
    <input v-model="month">
    <div id="birth">出生年月：{{year}}年 {{month}}月<div>
    <div>輸入次數：{{count}}</div>
<div>

我們希望能實現一個功能，可以實時對輸入框的輸入次數計數並顯示。

 

之前我們用computed把數據的改變綁定到dom上，這次就用watch來實現這個需求。

 

watch就像vue中監控或開關一樣，只要有某個動作，就會行動。

 

接下來寫js部分的代碼：

var change = new Vue({
        el:"#nieo",
        data:{
            year:1996,
            month:7,
            count:0
        },
        computed:{
            birth () {
                return this.year + "." + this.month
            }
        },
        watch:{
            year () {
                return this.count++
            },
            month () {
                return this.count++
            }
        }
})

完成以后，打開網頁看看效果，是不是每次輸入都會讓count的數值發生變化呢。

注意，watch的使用可以再簡化一些，比如像這樣：

watch:{
    birth () {
        return this.count++
    }    
}

為什么可以這樣寫，computed和watch的執行順序，birth的數據由year和month組成

任何一個發生變化都會使得computed發生作用，而watch又在其后執行

因此，監聽birth也能達到同樣的效果

 

原文:https://mp.weixin.qq.com/s/MT2uutHhfkl-TJDHzu3JNQ