监听属性:
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方法来进行数据的检测,同回调一样,在数据变动时调用。根据需要使用。