在vue中，很多时候需要实时了解数据的变化执行相应的操作，通过watch监听能实现相应需求。
<div>
<p>inputOne: <input type="text" v-model="value1"></p>
<p>inputTwo: <input type="text" v-model="valueObj.value2"></p>
</div>
1、注册watch
export default {
name: ‘demo‘,
watch: {
value1(newVlue, oldValue) {
this.value = newValue + ‘bbb‘
console.log(this.value）
}
},
data() {
return {
value: ‘aaa‘,
value1：‘‘,
valueObj: {
value2: ‘‘,
}
}
}
}
在inputOne输入123后，监听到value1的改变，打印出value的值：123bbb
2、handler方法
watch中需要具体执行的方法，监听数组或对象的属性时用到的方法
watch: {
value1：{
handler（newVal，oldVal）{
this.value = newVal + ‘ccc‘
},
immediate:true
}
},
3、immediate属性
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，默认为false
4、deep属性
监听对象或对象中的属性，需要使用deep，即深度监听。
在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，当然这样也会损耗性能
watch: {
valueObj：{
handler（newVal，oldVal）{
this.value = newVal + ddd‘
},
deep:true
}
},
或者：直接监听属性，避免给所有属性监听而损耗性能。
watch: {
‘valueObj.value2‘：{
handler（newVal，oldVal）{
this.value = newVal + ‘eee‘
},
immediate: true,
deep:true
}
},
5、watch监听路由
watch: {
‘$route‘(to,from){
console.log(to); //to表示去往的界面
console.log(from); //from表示来自于哪个界面
if(to.path=="/home"){
console.log("路由跳转home");
}
}
},
原文：https://www.cnblogs.com/ixtao/p/14928711.html