Vue.js 监听属性

Vue提供了一个watch方法可以让使用者去监听data内的数据变动，我们可以通过 watch 来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

例如：

<div id="app">
    <input type="text" v-model="name">
    <h3>{{name}}</h3>
    <hr>
    <input type="text" v-model="tel">
    <h3>{{tel}}</h3>
    <hr>
    <input type="text" v-model="user.name">
    <h3>{{user.name}}</h3>
</div>

var vm = new Vue({
    el: '#app',
    data() {
        return {
            name: 'Jack',
            tel: 15966668888,
            user: {
                name: 'Mary',
                age: 10
            }
        }
    },
    watch: {
        tel: function(newVal, oldVal) {
            console.log('tel被修改啦,原来的值' + oldVal + '新值：' + newVal);
        },
        user: {
            handler(newVal, oldVal) {
                debugger
                console.log('newVal', newVal);
                console.log('oldVal', oldVal);
            },
            deep: true //深度监视，当对象中的属性发生变化的时候会监视
        }
    },
    methods: {},
    created() {},
    beforeMount() {},
    mounted() {}
});

里面的deep设为了true，是深度监听。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。