如何监听对象里面每一个属性的变化

1.0 版本

class Observer{
    // 只要将需要监听的那个对象传递给 Observer 这个类
    // 这个类就可以快速的给传入的对象的所有属性都添加 get/set 方法
    constructor(data){
        this.observer(data);
    }
    observer(obj){
        if(obj && typeof obj === 'object'){
            // 遍历取出传入对象的所有属性, 给遍历到的属性都增加 get/set 方法
            for(let key in obj){
                this.defineRecative(obj, key, obj[key])
            }
        }
    }
    // obj: 需要操作的对象
    // attr: 需要新增 get/set 方法的属性
    // value: 需要新增 get/set 方法属性的取值
    defineRecative(obj, attr, value){
        Object.defineProperty(obj, attr, {
            get(){
                return value;
            },
            set:(newValue)=>{
                if(value !== newValue){
                    value = newValue;
                    console.log('监听到数据的变化');
                }
            }
        })
    }
}

let obj = {
	name: 'tr',
    age: 25
}
obj.name = 'tanran' // 监听到数据的变化
obj.age = 26 // 监听到数据的变化

// 但是如果属性也是一个对象，这种情况是监听不到的
let obj = {
	tr: {
		name: 'tr',
    	age: 25
	}
}
obj.tr.name = 'tanran'

2.0 版本

class Observer{
    constructor(data){
        this.observer(data);
    }
    observer(obj){
        if(obj && typeof obj === 'object'){
            for(let key in obj){
                this.defineRecative(obj, key, obj[key])
            }
        }
    }
    defineRecative(obj, attr, value){
    	// 如果属性的取值又是一个对象, 那么也需要给这个对象的所有属性添加 get/set 方法
        this.observer(value);
        Object.defineProperty(obj, attr, {
            get(){
                return value;
            },
            set:(newValue)=>{
                if(value !== newValue){
                    value = newValue;
                    console.log('监听到数据的变化');
                }
            }
        })
    }
}

// 但是如果属性也是一个对象，这种情况是监听不到的
let obj = {
	tr: {
		name: 'tr',
    	age: 25
	}
}
obj.tr.name = 'tanran' // 监听到数据的变化

// 但是如果像这样给属性赋值，则又监听不到了
obj.tr = {
	name: 'tanran',
    age: 26
} // 监听到数据的变化
obj.tr.age = 24

3.0 版本

class Observer{
    constructor(data){
        this.observer(data);
    }
    observer(obj){
        if(obj && typeof obj === 'object'){
            for(let key in obj){
                this.defineRecative(obj, key, obj[key])
            }
        }
    }
    defineRecative(obj, attr, value){
        this.observer(value);
        Object.defineProperty(obj, attr, {
            get(){
                return value;
            },
            set:(newValue)=>{
                if(value !== newValue){
                	// 如果给属性赋值的新值又是一个对象, 那么也需要给这个对象的所有属性添加 get/set 方法
                    this.observer(newValue);
                    value = newValue;
                    console.log('监听到数据的变化');
                }
            }
        })
    }
}