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,是深度监听。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。