前言
前面提到了计算属性，虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
基本用法
在vue中，使用watch来响应数据的变化，即在data中的数据发生变化的时候，会触发监听函数：
body>
<div id="app">
<input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:""
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
console.log(newVal,oldVal)
}
}
})
</script>
</body>
在这里定义了一个input 文本框，并用v-model进行绑定，当数据发生变化的时候，在控制台可以看到变化。值得注意的是，回调函数有两个参数，一个是新改变的值，另一个是上一个值。值得注意的是，监听函数的函数名必须是在data中定义且要监听的属性，如上面的message。当然除了监听data中的数据还可以监听路由，路由在后面会介绍到，主要是监听'$route.path'，这是方法和监听属性所不能的。
立即执行
通过基本用法可以看到watch通过响应数据进行触发，那么我想要在页面刷新后立即触发，不通过改变数据触发怎么办呐？这里就要使用到immediate和handler，具体实例如下：
<body>
<div id="app">
<input type="text" v-model="context" placeholder="context"> <br>
<input type="text" v-model="message" placeholder="message">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
context:"",
message:""
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
},
context:{
handler(newVal,oldVal){
console.log("须晴日，看红装素裹，分外妖娆。")
},
immediate: true
}
}
})
</script>
</body>
如上面的context对象，这里设置immediate=true，然后用handler实现方法体的逻辑，之前我们写的函数其实就是在写这个handler方法；immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
深度监听
当需要监听复杂数据类型(对象)的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听：
<body>
<div id="app">
<input type="text" v-model="context" placeholder="context"> <br>
<input type="text" v-model="message" placeholder="message"> <br>
<input type="number" v-model="man.age" placeholder="man.age">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
context:"",
message:"",
man:{
name:"吴邪",
age:"25"
}
},
watch:{
message(newVal,oldVal){
console.log("江山如此多娇，引无数英雄竞折腰。")
},
context:{
handler(newVal,oldVal){
console.log("须晴日，看红装素裹，分外妖娆。")
},
immediate: true,
deep: true,
},
man:{
handler(newVal,oldVal){
console.log("我是吴三省")
},
immediate: true,
deep:true
}
}
})
</script>
</body>
设置deep: true 则可以监听到man.age的变化，此时会给man的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值，可以使用字符串的形式监听对象属性，如监听man.name这个属性
watch:{
'man.name':{
handler(newVal,oldVal){
console.log("小邪，我是吴三省")
},
immediate: true,
deep:true
}
}