作用：监听数据(一旦数据符合判断，则执行自定义操作)

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>侦听器watch</title>
    9. </head>
    11. <body>
    12.     <div id='app'>
    13.         <input type="text" v-model='msg'>
    14.         <h3>{{msg}}</h3>
    15.         <h3>{{stus[0].name}}</h3>
    16.         <button @click='stus[0].name = "Tom"'>改变</button>
    17.     </div>
    18.     <script src="./vue.js"></script>
    19.     <script>
    20.         // 基本的数据类型可以使用watch直接监听，复杂数据类型Object Array 要深度监视
    21.         new Vue({
    22.             el: '#app',
    23.             data: {
    24.                msg:'',
    25.                stus:[{name:'jack'}]
    26.             },
    27.             watch: {
    28.                 // key是属于data对象的属性名 value:监视后的行为 newV :新值 oldV:旧值
    29.                 'msg':function(newV,oldV){
    30.                     // console.log(newV,oldV);
    31.                     if(newV === '100'){
    32.                         console.log('hello');
    33.                     }
    35.                 },
    36.                 // 深度监视： Object |Array
    37.                 "stus":{
    38.                     deep:'true',
    39.                     handler:function(newV,oldV){
    40.                         console.log(newV[0].name);
    42.                     }
    43.                 }
    44.             },
    45.         })
    46.     </script>
    47. </body>
    49. </html>