Vue笔记：watch（侦听属性）

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方法就可以了。