Vue.js监听属性

监听属性：

    watch属性为Vue的监听属性，用来监听Vue实例中数据的变动。可以是data中定义的属性（也经常这么用），也可以时Vue自带的属性，比如$route。

    首先看示例：

    <div id = "app">

      <p style = "font-size:25px;">计数器: {{ counter }}</p>

         <button @click = "counter++" style = "font-size:25px;">点我</button>

    </div>

    <script type = "text/javascript">

      var vm = new Vue({

         el: '#app',

         data: {

            counter: 1,

              counter: 1

         },

      watch:{

       counter:function(val1,val2){

     console.log('val1: '+val1+', val2: '+val2);

                this.counter2++;

     },

            counter2:{

                handler:function(val1){

                    console.log('counter2: '+val1);

                },

                deep:false,

                immediate:true

            }

      }

     });

     vm.$watch('counter', function(nval, oval) {

        alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');

     });

    </script>

    可以看出：watch是一个对象，其中的数据为键值对。

    键：要监听的数据。

    值：对应回调函数。可以是定义个匿名函数，如示例中counter对应的函数。有两个参数，第一个为改变后的值，第二个为改变前的值。第二个值可以省略。

        也可以是一个函数名，需要用单引号引上。(暂时不确定使用方式）

        也可以是一个对象，如示例所示，counter2的监听值为一个对象。该对象有三个属性：handler，就是对应的回调函数。deep，指定是否深度监听。immediate，指定是否已当前值执行回调。

        这三个属性并非全部必须。一般这种方式用来监听键为对象时，其中值的变动，需要进行深度监听。

    最后，vm.$watch(...)是主动调用$watch方法来进行数据的检测，同回调一样，在数据变动时调用。根据需要使用。