watch监听一个对象中的属性 - Vue篇

目录

• 1.监听一个对象
• 2.监听对象内的某个属性
• 3.回顾一下watch的使用

vue中提供了watch方法，可以监听data内的某些数据的变动，触发相应的方法。

例:

 data() {
    return {
    	search: {
			name: '',
			code: '',
			timePicker:[]
		}
    }
}

1.监听一个对象

监听search

watch: {
	search: {
		handler(newVal, oldVal) {
			//todo
		},
		immediate: true,
     	deep: true // 可以深度检测到 person 对象的属性值的变化
	}
}

• immediate如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法。默认为false
• deep设置为true，这样，如果修改了search内任何一个属性，都会执行handler这个方法。 有一个缺点是 会影响性能，尤其是对象内结构嵌套过深。
• 如果只是想监听对象内的某个属性，比如name，则可以选择如下操作方法。

2.监听对象内的某个属性

watch: {
	'': {
		handler() {
			// todo
		},
	}
}

或者

computed: {
    getName: function() {
    	return this.search.name
    }
}
watch: {
     getName: {
         handler: function() {
            //todo 
         },
     }
}

3.回顾一下watch的使用

首先确认 watch是一个对象，一定要当成对象来用。

• 对象就有键，有值。

• 键：就是你要监控的那个变量。比如说$route，这个就是要监控路由的变化。或者是data中的某个变量。

• 值：

  • 可以是函数：就是当你监控的变量变化时，需要执行的函数，这个函数有两个形参，第一个是当前值，第二个是变化后的值。

  • 值也可以是函数名：不过这个函数名要用单引号来包裹。

  • 值是包括选项的对象：选项包括有三个。

    • 1.第一个handler：其值是一个回调函数。即监听到变化时应该执行的函数。
    • 2.第二个是deep：其值是true或false；确认是否深入监听。（一般监听时是不能监听到对象属性值的变化的，数组的值变化可以听到。）
    • 3.第三个是immediate：其值是true或false；确认是否以当前的初始值执行handler的函数。

回顾，留下足迹！！！