VUE监听同时监听多个属性

• 同时监听多个属性
• 多种监听方式：数组、对象、值

同时监听多个属性

重点

1. 通过计算属性将两个对象组合起来，并通过watch属性监听
2. 只可以是两个完整的属性，不可以是子属性。例如，就不能是const {student.name,school} = this，此处不懂看代码
3. 如果可能的话，尽量将牵扯的属性定义在一个对象中，直接监听该对象即可。例如直接监听student对象

<template>
···
</template>
<script>
export default{
	data:function(){
		return {
			student:{
				name:"小明",
				age:"24"
			},
			school:"光明中学"
		}
	},
	computed:{
		listenData(){
			const {student,school} = this
            return {student,school}
		},
		student(){
			//直接监听对象
		}
	},
	watch:{
		listenData(val){
			//do something
			//val中的值是组合的对象
		}
	}
}
</script>

多种监听方式：数组、对象、值

<template>
···
</template>
<script>
export default{
	data:function(){
		return {
			student:{
				name:"小明",
				age:"24"
			},
			school:"光明中学",
			classList:[{className:"高一",position:"一楼"},{className:"高二",position:"二楼"}]
		}
	},
	watch:{
		//监听对象
		//只有通过this.$set(student,"name",newValue)、this.$delete(student,"name",newValue)这样改变值才能触发
		student(){
			//dosomething
		},
		//监听数组一
		//只能监听到$set $delete函数改变的值
		classList(){
			//DO SOMETHING
		},
		//监听数组二
		//深度监视,即便不通过$set、$delete方法修改内部值也会触发，遍历数组，对性能消耗略大
		classList:{
			handler(){
				//DO SOMETHING
			},
			deep:true
		},
		//监听单个属性
		school(){
			//DO SOMETHING
		}
	}
}
</script>