watch(侦听属性)
例子
cosnt app = new Vue({
//...
watch:{
要监听的属性:{
handler(新值,旧值){ //... },
功能属性
}
}
})
handler
- 给 监听的属性 绑定了一个handler方法,之前写的 watch 方法其实默认写的就是这个handler,Vue
会去处理这个逻辑,最终编译出来其实就是这个handler
默认
- watch最初绑定的时候不会执行,要等到 监听的属性 改变之后才会执行
功能属性
immediate:true
- 如果在 wacth 里声明了 被监听的属性 之后,就会立即先去执行里面的handler方法 默认false
deep:true
深度监听,默认false
- 如果被监听的是一个对象,深度监听就是会监听对象里每一个元素的改变
- 监听器会一层层的往下遍历,给对象的所有属性都加上这个监听器,这样性能开销就会非常大,任何修改obj里面任何一个属性都会触发这个监听器里的handler
解决方案
把某一个要监听的对象元素用字符串包起来
watch:{
"对象名称.元素名称":{ //... }
}
注销watch
- 如果watch不是写在组件内部的,那么会导致内置溢出,需要我们手动注销
- 组件外部的watch
const 名称 = 组件名称.$watch('监听目标', (新值, 旧值) => { //。。。 })
unWatch(); // 手动注销
手动注销
- 组件名称.$watch调用后会返回一个值,就是unWatch方法,你要注销 watch 只要调用unWatch方法就可以了。