vue学习之监听属性watch

当需要在数据变化时执行异步或开销较大的操作时，使用监听器是最有用的

watch: {   
// 如果`question`发生改变，这个函数就会运行这里如果question是引用类型，只有当引用地址发生变化才能被监测question: function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...'},
// deep为true表示深度监听，如果question为对象，deep表示question内部属性值变化也可以监听到question: {handler:function (newQuestion, oldQuestion) { this.answer = 'Waiting for you to stop typing...'} ,deep:true}
}

我们可以通过 watch 来响应数据的变化。

以下是实现计数器的实例:

<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}
});
vm.$watch('counter', function(nval, oval) {alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>