Object.defineProperty方法回顾

添加的属性不可枚举（不可遍历）

传三个参数 要添加属性的对象名，需添加的属性名，配置项

let number = 18;

      let person = {

        name: "张三",

        sex: "男",

      };

      Object.defineProperty(person, "address", {

        value: "北京",

        enumerable: true, //控制属性是否可枚举，默认值为false

        writable: true, //控制添加的属性是否可修改，默认值为false

        configurable: true, //控制添加的属性是否可删除，默认值为false

      });

      console.log(Object.keys(person));

      Object.defineProperty(person, "age", {

        // 当person属性中的age值被读取时，会调用get函数，且该函数的返回值即age的值

        get() {

          console.log("age值被读取了");

          return number;

        },

        // 当person属性中的age值被修改时，会调用set函数，且会收到修改的具体值

        set(value) {

          console.log("age值被修改了", value);

          number = value;

        },

      });

      console.log("person", person);

理解数据代理

数据代理定义： 通过一个对象代理对另一个对象中的属性进行操作（读/写）

     let obj1 = { x: 100 };

     let obj2 = { y: 200 };

       Object.defineProperty(obj2,'x',{

           get(){

               return obj1.x

           },

           set(value){

               obj1.x=value

           }

       })

Vue中的数据代理

1、定义：通过vm对象来代理data对象中的属性操作（读/写）

2、好处：更加方便的操作data中的数据

3、基本原理

            1、通过Object.defineProperty()把data中的全部属性添加到vm实例上

            2、为每一个添加到vm上的属性都指定一个getter/setter

            3、在getter/setter内部去操作（读/写）data中对应的属性