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>