更多文章可戳:github.com/MagicalBrid…
假设有如下代码：
<div>
<p>FullName: {{fullName}}</p>
<p>FirstName:
<input type="text" v-model="firstName">
</p>
</div>
new Vue({
el: '#root',
data: {
firstName: 'Dawei',
lastName: 'Lou',
fullName: ''
},
watch: {
firstName(newName, oldName) {
this.fullName = newName + ' ' + this.lastName;
}
}
})
上面的代码的效果是，当我们输入firstName后，watch监听每次修改变化的新值，然后计算出fullName。
handler方法和immediate属性
这里watch的一个特点是，最初绑定的时候是不会执行的，要等到firstName改变的时候才执行监听计算，那我们想要一开始就让他最初绑定的时候就执行怎么办呢？我们需要修改一下我们的watch写法，修改过后的watch代码如下:
watch:{
firstName:{
handler(newName,oldName){
this.fullName = newName+ ' ' + this.lastName
},
// 代表watch里面声明了firstName这个方法之后立即执行handler方法
immediate: true
},
}
注意到handler了吗？我们给firstName绑定了一个handler方法,之前我们写的watch方法其实默认写的就是这个handler,Vue.js会处理这个逻辑，最终编译出来的其实就是这个handler.
而immediate：true 代表如果在watch里面声明了firstName之后，就会立即先去执行里面的handler方法，如果为false，就和我们之前的效果一样，不会再绑定的时候就执行。
deep属性
watch里面还有一个属性deep，默认值是 false 代表的是否深度监听，比如我们data里面有一个obj属性。
<div>
<p>obj.a: {{obj.a}}</p>
<p>obj.a:
<input type="text" v-model="obj.a"><
</p>
</div>
new Vue({
el: '#root',
data: {
obj: {
a: 123
}
},
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true
}
}
})
当我们在输入框中输入数据改变obj.a数据的时候。我们发现虽然视图更新了，但是在handler回调并没有执行，也就没有打印obj.a changed在这里Vue并不能检测到对象的属性的添加或者删除。由于Vue在初始化的时候对于属性执行了getter/setter转化过程，所以属性必须在data对象上存在才能让Vue转换它，这样才能让它是响应式的。
默认的情况下，handle只监听obj这个属性它的引用的变化，我们值有给obj赋值的时候它才会监听到，比如我们在mounted事件钩子函数中对obj进行重新赋值。这个时候 是可以触发 handler 监听回调的。
如果我们想要监听 obj 里的属性a的值呢？ 这个时候 deep 属性就派上用场了！
watch: {
obj: {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true,
deep:true
}
}
deep的意思是深入观察,监听器会一层层的往下遍历，给对象的所有的属性都添加这个侦听器，但是 这样性能开销就会比较大了，任何修改obj里面任何一个属性都会触发这个侦听器里面的handler.
优化，我们可以使用字符串形式进行监听。
watch:{
'obj.a': {
handler(newName, oldName) {
console.log('obj.a changed');
},
immediate: true
}
}
使用上述的写法，即使不使用deep属性选项，依然能够成功的触发监听回调。
注销watch
为什么要注销watch？ 因为我们的组件是经常要销毁的，比如我们跳转一个路由，从一个页面跳转另一个页面。那么原来的页面的watch就没有用了，这个时候我们应该注销原来页面的watch不然会有一些性能问题，好在我们平时都是将watch写在组件中的，他会随着组件的销毁而销毁。
const app = new Vue({
template: '<div id="root">{{text}}</div>',
data: {
text: 0
},
watch: {
text(newVal, oldVal){
console.log(`${newVal} : ${oldVal}`);
}
}
});
但是，如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单
const unWatch = app.$watch('text', (newVal, oldVal) => {
console.log(`${newVal} : ${oldVal}`);
})
unWatch(); // 手动注销watch
app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。
最后谢谢各位小伙伴愿意花费宝贵的时间阅读本文，如果本文给了您一点帮助或者是启发，请不要吝啬你的赞和Star，您的肯定是我前进的最大动力。github.com/MagicalBrid…
