VUE数据劫持代理(Object.defineProperty())

MDN关于Object.defineProperty

    //模拟vue中的data
    let data = {
        name: "aaa",
        age: 22
    }
    // 模拟组件实例
    let _this = {};
    //使用 Object.defineProperty

    for (let item in data) {
        // console.log(item, data[item]);
        Object.defineProperty(_this, item, {
            //get用来获取扩展属性的值，当获取该属性的值是使用get方法
            get() {
                console.log('调用get（）');
                return data[item]
            },
            //监视扩展属性，只要一修改就调用
            set(newValue) {
                console.log('调用了set（）', newValue);
                data[item] = newValue;
            }
        })

    }
    console.log(_this);
    //通过Object.defineProperty的get方法修改的属性，不能使用 对象.属性 修改,但是会出发set（）方法
    _this.age = 55// 调用了set（） 55

    // console.log(_this.name);