侦听器
虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
vm.$watch()
语法：
vm.$watch(name,fnCb); //浅度监视
vm.$watch(name,fnCb,{deep:true}); //深度监视：后台过来的数据是对象
参数：
name：数据的名字
fncb：回调函数
实例一：
var vm = new Vue({
data:{
a:1,
b:2
}
}).$mount('#box');
vm.$watch('a',function(){ //浅度监视
alert('数据变化了');
// this代表vm
this.b = this.a + 3
});
document.onclick = function() {
vm.a = 22
}
实例二：
var vm = new Vue({
el:"#box",
data:{
a:{name:"strive",age:16}
}
});
vm.$watch("a",function(){
alert("发生变化了");
},{deep:true}); // 深度监视
document.onclick = function(){
vm.a.name = "Mike";
}
<div id="box">
{{a | json}} <!-- 相当于JSON.stringfiy-->
</div>
watch()
语法：
watch：{
监听的数据：fncb(newQuestion, oldQuestion) // 浅度监视
}
watch：{
监听的数据：fncb(newQuestion, oldQuestion) // 深度监视
deep:true // 深度监视
}
参数：
newQuestion：变化后监听数据的值
oldQuestion：变化前监听数据的值
实例一：
<div id="box">
<p>{{fullName}}</p>
</div>
<script>
var vm = new Vue({
data:{
firstName:"wang",
lastName:"kun",
fullName:""
},
watch:{
firstName:function(val){
this.fullName = val + this.lastName;
},
lastName:function(val){
this.fullName = this.firstName + val;
}
}
}).$mount("#box");
document.onclick = function(){
vm.firstName = "hello";
vm.lastName = "world"
}
</script>
实例二：
<div id="box">
<p>{{json.a}}</p>
<p>{{json.b}}</p>
</div>
<script>
var vm = new Vue({
data:{
json:{
a:"appple",
b:"banana"
}
},
watch:{
json:function(){
alert(1);
},
deep:true
}
}).$mount("#box");
document.onclick = function(){
vm.json.a = "age";
}
</script>
实例三：
在这个示例中，使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。