概念
用于监视某个状态的改变,是在视图层更新之后,监听的值改变了,才执行的监听,所以并不是数据一更新就立马监听到了。触发顺序在$nextTick()之前,触发时间在beforecreate和created之间。
怎么写
// 平时可简写
watch: {
xxx(newVal, oldVal) {
// ...
}
}
// 默认的写法应该是,如果自己写handler内部,相当于重构了监听函数
watch: {
xxx:{
handler(newVal, oldVal) {
// ...
}
}
}
初始化监听
// 默认最初绑定的时候是不会执行的,要等到xxx改变时才执行监听计算。
watch: {
xxx: {
handler(newVal, oldVal) {
// ....
},
// 代表在wacth里声明了xxx这个方法之后立即带着原始值先去执行handler方法
immediate: true
}
}
适合用在传props的值无改变,结果没触发监听,导致存不到值的情况。注意最开始的时候oldVal= undefined。
深度监听
例如监听的是一个对象,那么当通过视图层只改变对象其中一个属性的时候,watch不会监听到,开启深度监听(不建议监听数组开启这个)。
deep: true
deep的意思就是深入观察,监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,但是这样性能开销就会非常大了,任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
解决开销大的方法,用字符串的形式精准监听
watch: {
'obj.a': {
handler(newVal, oldVal) {
// ...
},
immediate: true,
// deep: true
}
}
监听data状态
data() {
return {
mes: '1'
};
},
watch:{
mes(newVal, oldVal){
console.log('旧值', oldVal)
console.log('新值', newVal)
}
}
监听某个具体的状态
data() {
return {
mes: {
a: '1'
}
};
},
watch:{
'mes.a'(newVal, oldVal){
console.log('旧值', oldVal)
console.log('新值', newVal)
}
}
监听路由的变化
监听整个路由
watch: {
$route: {
handler(to, from) {
console.log("去哪", to);
console.log("来自哪", from);
},
immediate: true
},
},
只监听个别参数
watch: {
'$route.path': {
handler(to, from) {
console.log("去哪", to);
console.log("来自哪", from);
},
immediate: true
},
},
监听计算属性
watch: {
// 如果正在播放的歌曲发生变化(和还有没播放歌曲时要求播放歌曲),那么重新请求歌曲播放资源地址
currentSong(newVal, oldVal) {
if (oldVal === undefined || newVal.id !== oldVal.id) {
this.getMusicUrl(newVal.id);
this.getLyricData(newVal.id);
}
}
}
监听props的数据
watch:{
xxx(newVal, oldVal){
this.propsdata = this.propsProps
}
}
如果需要对props值进行修改,且props传进来的值是会动态的,建议监听后存放在data中再使用。
写在生命周期的监听
可以把watch写在created和mounted中
this.$watch('something', (newval, oldVal) => {
...
})
注意
由于触发的时间在created之前,所以执行method的方法的时候要考虑一些值的状态问题。