监视属性就是监控一个属性，然后针对属性的变化可以采取一些行动

    1. <body>
    2.         <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    3.         <div id="app">
    4.             <p> a的值是 {{a}} </p>
    5.             <button type="button" @click="a ++ ">点我</button>
    6.         </div>
    8.         <script >
    9.             var vm = new Vue ({
    10.                 data : {
    11.                     a:1 ,
    12.                     b:2 ,
    13.                     c : {
    14.                         d:3,
    15.                     },
    16.                 },
    17.                 //这里监控的是a
    18.                 watch: {
    19.                     a:{
    20.                         handler(newvalue,oldvalue){
    21.                             console.log("a 发生了改变");
    22.                         }
    23.                     }
    24.                 }
    25.             });
    26.             vm.$mount("#app")
    27.         </script>    
    28.     </body>

    这是一个watch的案例
    运行了以上代码之后我们发现如下结果：
    image.png
    如上handler什么时候会被调用？
    答案：当a发生变化的时候

    还有另外一种写法调用watch属性

        <body>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
        <div id="app">
            <p> a的值是 {{ a }} </p>
            <button type="button" @click="a ++ ">点我</button>
        </div>

        <script >
            var vm = new Vue ({
                data : {
                    a:1 ,
                    b:2 ,
                    c : {
                        d:3,
                    },
                },
            });
            vm.$watch('a',{
                handler(oldvalue,newvalue){
                    console.log("a发生了变化")
                }
            });
            vm.$mount("#app")
        </script>    
    </body>

    如果使用以上方法，一定要注意vm.$watch 中传入两个变量，一个是’a’,一个是a的配置项，’a’一定要有引号