Vue监视数据的变化：$watch

话不多说直接贴代码，输入新的name值，对name进行监听

方式一：

<div id="itany">
    <input type="text" v-model="name">
    <h3>{{name}}</h3>
</div>
<script>
    var vm = new Vue({
        el: '#itany',
        data: {
            name: 'zhang',
        },
    });
    //方式1：使用vue实例提供的$watch()方法
    vm.$watch('name', function(newValue, oldValue) {
        console.log('name被修改啦，原值：' + oldValue + '，新值：' + newValue);
    });
</script>

方式二：

<div id="itany">
    <input type="text" v-model="age">
    <h3>{{age}}</h3>
</div>
<script>
    var vm = new Vue({
        el: '#itany',
        data: {
            age: 23,
        },
        watch: { //方式2：使用vue实例提供的watch选项
            age: (newValue, oldValue) = > {
                console.log('age被修改啦，原值：' + oldValue + '，新值：' + newValue);
            },
        }
    });
</script>

对对象进行监视

<div id="itany">
    <input type="text" v-model="user.name">
    <h3>{{user.name}}</h3>
</div>
<script>
    var vm = new Vue({
        el: '#itany',
        data: {
            user: {
                id: 1001,
                name: 'alice'
            }
        },
        watch: {
            user: {
                handler: (newValue, oldValue) = > {
                    console.log('user被修改啦，原值：' + oldValue.name + '，新值：' + newValue.name);
                },
                deep: true //深度监视，当对象中的属性发生变化时也会监视
            }
        }
    });
</script>