Vue監視データの変化:$watch

話をしないで直接コードを貼って、新しいname値を入力して、nameに対して傍受を行います
方法1:

    
    
{{name}}


    var vm = new Vue({
        el: '#itany',
        data: {
            name: 'zhang',
        },
    });
    //  1：  vue     $watch()  
    vm.$watch('name', function(newValue, oldValue) {
        console.log('name    ，  ：' + oldValue + '，  ：' + newValue);
    });

方式2:

    
    
{{age}}


    var vm = new Vue({
        el: '#itany',
        data: {
            age: 23,
        },
        watch: { //  2：  vue     watch  
            age: (newValue, oldValue) = > {
                console.log('age    ，  ：' + oldValue + '，  ：' + newValue);
            },
        }
    });

オブジェクトの監視

    
    
{{user.name}}


    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 //    ，                
            }
        }
    });