vue之watch的用法

最近在做一個H5的專案。 需求是當使用者在輸入完了手機號和驗證碼之後，登入按鈕才可以點選。
在沒有使用vue之前，我們可能是通過input的change事件來判斷，使用者是否輸入了內容，然後修改按鈕的狀態。現在有了vue，就省事了很多，我們只需要在watch中，監聽資料模型的值改變即可。

<div id="app" class="login_area">
    <div class="form_line">
        <label>二次密碼:</label>
        <input v-model="passw2" placeholder="請再次輸入密碼" />
    </div>
</div>
data: {
    passw2: '',  // 第二次 輸入的密碼
},
watch: {
    passw2: function(curVal,oldVal){
        console.log(curVal);
    },
},

但是如果，監聽的是一個物件呢？
vue-watch文件中介紹了一個deep屬性。

發現物件內部值的變化。那麼實際怎麼做呢？

<div id="app" class="login_area">
    <div class="form_line">
        <label>使用者名稱:</label>
        <input v-model="info.name" placeholder="請輸入使用者名稱" />
    </div>
    <div class="form_line">
        <label>密碼:</label>
        <input v-model="info.passw" placeholder="請輸入密碼" />
    </div>
</div>
var app = new Vue({
    el: '#app',
    data: {
        info: {
            name: '', // 使用者名稱
            passw: '' // 密碼
        },
    },
    watch: {
        info: {  // 這監聽物件值的改變 和上面的不一樣。
            handler(curVal,oldVal){
                console.log(curVal);
            },
            deep: true, 
        },
    },
})

關於watch這個在實際專案中確實很好用，我們要注意的是，在監聽屬性和物件的時候是有些差異的。這個也是當時在需要監聽物件時候我是懵逼了。我總不能這麼寫：

info.name: function(curVal,oldVal){
    console.log(curVal);
},

後來在看文件後才知道還有deep選項。