Vue学习之---watch侦听器

Vue学习之—watch侦听器

Vue中的watch属性是什么，作用呢？

watch属性中存在着能侦听Vue数据的侦听器，而侦听器本质上是个函数，要侦听哪一个数据的变化，就把数据名当做方法名即可；

侦听器函数会接收两个参数：

第一个参数是数据改变后的新的值，第二个参数是数据改变前的旧的值；

watch属性中侦听器的格式

watch属性中的侦听器存在着两种格式：

• 方法形式的侦听器

export default {
    
    
	data(){
    
    
	//	定义的一些变量
	},
	watch:{
    
    
	//	将要侦听的属性以方法的形式放在watch属性当中
	property(){
    
    
			//	当侦听的属性发生变化的时候会触发侦听器中的代码块
			
			/*代码块*/
			
		}
	}
}

方法形式的侦听器有缺点：

• 缺点1：无法在刚进入页面的时候自动触发；
• 缺点2：如果侦听的是一个对象，如果对象里边的属性发生了变化，不会触发侦听器（不能够深度侦听）；

• 对象形式的侦听器

export default {
    
    
	data(){
    
    
	//	定义的一些变量
	},
	watch:{
    
    
	//	将要侦听的属性以方法的形式放在watch属性当中
	property1：{
    
    
			// 侦听器的处理函数，侦听的属性发生改变的时候会触发handler事件处理函数
			handler(){
    
    
				
			},
			// deep属性设置属性值为true那么便开启了深度侦听；
			// 只要是对象中的任何一个属性值发生了变化，都会触发handler事件处理函数；
			// 默认是false，
			deep:true,
			//	immediate属性控制侦听器是否要在刚进入页面的时候立即触发一次
			//	默认值是false，不触发
			immediate:true
		},
		
	//	如果只侦听对象的某个子属性的变化；
	//	那么要把这个对象的子属性的属性名用引号包起来
	'obj.property2':{
    
    
		handler(){
    
    
		},
		deep:true,
		immediate:true
	}
	
	}
}