watch的最常见用法：
export default {
data() {
return {
test: 'msg'
}
},
watch: {
test(news, olds) {
alert(news + olds)
}
}
}
这种是我们在项目中比较常用的写法，能满足我们大部分的需求，但是有些情况单单这种写法就满足不了了
监听对象的改变
如果只是监听对象指针的改变，上面的写法已经可以满足了，但是我们监听对象一般是需要监听对象中所有属性和和子属性变化，这个时候就要用到deep，实现对对象的深度监听
export default {
data() {
return {
test: {
kkm: 'a'
}
}
},
watch: {
test: {
handler(news, olds) {
},
deep: true
}
}
}
监听对象中某个值的改变
有时候，我们只需要对对象中的某个属性进行监听，这个时候可以用下面的写法
export default {
data() {
return {
test: {
kkm: 'a'
}
}
},
watch: {
'test.kkm': {
handler(news, olds) {
}
}
}
}
监听对象改变前执行一次回调
有时候，我们需要被监听的对象在改变前，就执行一次回调函数，这个时候我们可以使用immediate，如下，在开始监听test的同时，会立马执行一次handler函数
export default {
data() {
return {
test: {
kkm: 'a'
}
}
},
watch: {
test: {
handler(news, olds) {
},
immediate: true
}
}
}
希望代码中随时创建和移除监听
有时候，在比较复杂的业务逻辑中，我们需要在页面某个操作后开始对某个属性进行监听，或者希望在某个操作之后移除对某个属性的监听，这个时候我们可以使用vue实例的$watch方法，$watch方法返回一个取消监听函数，用来停止触发回调
export default {
data() {
return {
test: 'a',
unwatch: null
}
},
methods: {
// 开始监听
startWatch() {
this.unwatch = this.$watch('test', (news, olds) => {
alert(news)
})
}
},
beforeDestroy() {
// 移除监听
this.unwatch && this.unwatch()
}
}
