Vue监听一个对象中的属性值变化的实现方法

new Vue({
	el: '#app',
	data() {
		return {
			obj: {
				name: "张三", 
				age: 27
			}
		}
	},
    // 对 obj 的全部属性进行监听
	watch: {
		obj: {
			handler(newVal, oldVal) {
				console.log(`obj由 ${oldVal} 改为了 ${newVal}`)
			},
			// true表示obj任何属性发生变化之后立即执行handler方法
			immediate: true,
			// deep属性（深度监听，常用于对象下面属性的改变）
			deep: true
		}
	},
    // 对 obj 的单个属性age进行监听 方法一：
    watch: {
		"obj.age": {
			handler(newVal, oldVal) {
				console.log(`张三的年龄由 ${oldVal} 改为了 ${newVal}`)
			},
		}
	},
    // 对 obj 的单个属性age进行监听 方法二：
    methods: {
        // 触发值发生改变的事件
    	handleClick() {
            const interceptors = {
                set(receiver, property, value) {
                    console.log(property, "被修改为 ",value);
                    receiver[property] = value;
                    return true;
                }
            };
      		let engineer = new Proxy(this.obj, interceptors);
      		engineer.age = 100;
    	}
  	}
})