Vue notes: watch (listening attribute)

watch (listening attribute)

example

cosnt app = new Vue({
    
    
//...
	watch:{
    
    
		要监听的属性:{
    
    
			handler(新值，旧值){
    
     //... }，
			功能属性
		}
	}
})

handler

• A handler method is bound to the monitored property. The watch method written before actually writes this handler by default. Vue
  will process this logic, and the final compilation is actually this handler.

default

• The watch will not be executed when it is initially bound, and will not be executed until the monitored attribute changes

Functional attributes

immediate:true

• If the monitored attribute is declared in wacth, the handler method inside will be executed immediately and the default is false

deep：true

深度监听,默认false

• If the monitored object is an object, in-depth monitoring is to monitor the changes of every element in the object
• The listener will traverse layer by layer, adding this listener to all the properties of the object, so that the performance overhead will be very large. Any modification of any attribute in obj will trigger the handler in the listener

solution

把某一个要监听的对象元素用字符串包起来
watch:{
    
    
 "对象名称.元素名称":{
    
     //... }
}

Log out of watch

• If the watch is not written inside the component, it will cause the built-in overflow and we need to manually log out
• Watch outside the component

const 名称 = 组件名称.$watch('监听目标', (新值, 旧值) => {
    
     //。。。 })
unWatch(); // 手动注销

Log out manually

• Component name. $watch will return a value after calling it, which is the unWatch method. To log off the watch, just call the unWatch method.