watch侦听器

watch侦听器简介

watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

语法格式如下:

const vm = new Vue({
	el: '#app',
	data: {
		username: 'zhangsan'
	},
	watch: {
		//监听 username 值的变化
		//newVal 是"变化后的新值" oldVal 是"变化之前的旧值"
		username(newVal, oldVal) {
			console.log(newVal, oldVal);
		}
	},
})

侦听器的格式

1. 方法格式的侦听器
   1. 缺点1: 无法在进入页面的时候自动触发侦听器
   2. 缺点2: 如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器
2. 对象格式的侦听器
   1. 好处1: 可以通过 immediate 选项,让侦听器自动触发,需要自动触发才考虑使用此格式
   2. 好处2: 可以通过 deep 选项,让侦听器深度侦听对象中每个属性的变化

方法格式的侦听器

如上述代码所示

对象格式的侦听器

包含 immediate 和 deep 选项示例

const vm = new Vue({
	el: '#app',
	data: {
		username: 'admin',
	},
	//所有的侦听器都应该被定义在 watch 节点下
	watch: {
		//侦听器本质上是一个函数 要监听哪个数据的变化 就把数据名作为方法名即可
		//参数顺序为 新值在前 旧值在后
		username: {
			//侦听器的处理函数
			handler(newVal, oldVal) {
				console.log(newVal, oldVal);
			},
			//immediate 值的作用时控制侦听器是否自动触发 true则自动触发
			//false 为默认值 设置为true时会在打开页面时自动触发
			immediate: true,

            //开启深度监听 只要对象中任何一个属性变化 都会触发"对象的侦听器"
			deep: true
		}
	},
})

侦听对象的子属性

//如果要侦听的时对象的子属性 则必须包裹一层单引号
'info.username'(newVal) {
	console.log(newVal);
}