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选项。