Vue使用watch深度监视

watch深度监视

我们使用watch经常监视多级结构中所有属性的变化或者监视多级结构中某个属性的变化

• 深度监视：
  (1).Vue中的watch默认不监测对象内部值的改变（一层）。
  (2).配置deep:true可以监测对象内部值改变（多层）。
• 备注：
  (1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以！
  (2).使用watch时根据数据的具体结构，决定是否采用深度监视。
• 举例——数据结构

data: {
	numbers: {
		a: 1,
		b: 1,
		c: {
			d: {
				e: 100
			}
		}
	}
},

1.监视多级结构中所有属性的变化

只要多级结构中所有属性一变化，该最外层结构就监视到有变化

numbers:{
		deep: true,
		handler(newValue, oldValue){
			console.log('深度监视numbers改变了')
		}
	}

2.监视多级结构中某个属性的变化

'numbers.a': {
	handler(newValue, oldValue) {
		console.log('a被改变了',newValue)
	}
}