vue中的数据代理

Object.defineProperty方法

就是给对象定义添加属性
先看一段简单的代码，定义一个person对象

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
       
    }
  
</script>

提一个需求，需要给对象添加一个属性age

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
        //age: 18
    }
    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{ value: 18 })
    console.log(person);

</script>

浏览器查看

使用这种方法添加发现age的颜色和直接在对象力添加属性的颜色不一样

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
        age: 18
    }
    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     // Object.defineProperty(person,'age',{ value: 18 })
    console.log(person);

</script>

浏览器查看

这说明了age通过Object.defineProperty方法新增的属性是不可以被枚举的，不参与遍历，我们可以来验证一下
使用Object.keys方法来循环遍历对象的全部key生成一个数组

先使用第一种方法，直接添加age属性遍历key值

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
        age: 18
    }


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     // Object.defineProperty(person,'age',{ value: 18 })
    console.log(Object.keys(person));

</script>

浏览器将3个属性都打印出来了

再看看使用添加属性的方法

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
       // age: 18
    }


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{ value: 18 })
    console.log(Object.keys(person));

</script>

浏览器显示效果，说明通过方法添加最后新增的key没有了，说明是枚举不能被遍历

如果非要通过方法添加属性，并且需要遍历呢
可以添加一个属性enumerable

浏览器的效果，发现可以被遍历了
继续往下走，如果我们想修改在对象里面添加的属性值，需要怎么修改呢

发现这样直接修改，修改不了，
如果非要修改key的值，可以添加writable属性

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
       // age: 18
    }
    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{
         value: 18,
         //控制属性是否可以被枚举，默认是false
         enumerable: true,
         writable: true, // 控制属性是否可以被修改，默认false
     })
    console.log(Object.keys(person));

</script>

可以在浏览器上再去试试,发现可以被修改了

还有一个属性删除：configurable 控制属性是否可以被删除，默认是false
我们来试试

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
       // age: 18
    }


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{
         value: 18,
         //控制属性是否可以被枚举，默认是false
         enumerable: true,
         writable: true, // 控制属性是否可以被修改，默认false
     })
    console.log(Object.keys(person));

</script>

浏览器上的

在代码上添加属性configurable

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
       // age: 18
    }


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{
         value: 18,
         enumerable: true,//控制属性是否可以被枚举，默认是false
         writable: true, // 控制属性是否可以被修改，默认false
         configurable: true, //控制属性是否可以被删除，默认为false
     })
    console.log(Object.keys(person));

</script>

再去浏览器上试试,发现可以删除了

Object.defineProperty高级配置项

1.有一个需求，定义一个变量number，并且它的值就是age，且age的值需要随着number的值变化进行变化，这就需要借助get（getter）函数
当有人读取person的age属性是，get函数（getter）就会被调用，且返回值就是age的值

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
        //age: 18
    }
    let number=10086


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{
       /*  value: 18,
         enumerable: true,//控制属性是否可以被枚举，默认是false
         writable: true, // 控制属性是否可以被修改，默认false
         configurable: true, //控制属性是否可以被删除，默认为false
    */
             // 当有人读取person的age属性是，get函数（getter）就会被调用，且返回值就是age的值
        get:function() {	
            return number
        }
     })
    console.log(Object.keys(person));

</script>

浏览器查看，发现可以读取了，所以使用get方法可以读取到修改后person的age的值，就是说有人修改person的age属性时，get函数就会被调用，返回值就是age的值

有get函数就会有set函数（setter函数）当需要修改值时就使用set

<script>
    // VUE中的数据代理

//    Object.defineproperty()方法



    // 1.定义一个对象
    let person= {
        name: '小河',
        sex: '男',
        //age: 18
    }
    let number=10086


    // 给person 对象新增一个属性age
    // 这种方法添加属性的方式虽然麻烦，但也更加高级

     Object.defineProperty(person,'age',{
      /*   value: 18,
         enumerable: true,//控制属性是否可以被枚举，默认是false
         writable: true, // 控制属性是否可以被修改，默认false
         configurable: true, //控制属性是否可以被删除，默认为false
*/
         // 当有人读取person的age属性是，get函数（getter）就会被调用，且返回值就是age的值
        get:function() {
            console.log('有人读取了age属性');
            return number
        },
         // 当有人读取person的age属性是，set函数（setter）就会被调用，且返回值就是age的值

         set(value){
            console.log("有人修改了age属性的值,且会受到具体修改的值");
           number =value
        }
     })
    console.log(Object.keys(person));

</script>

浏览器上查看

理解数据代理

数据代理的定义：通过一个对象代理，去操作另一个对象的属性（读，写）

<script>
    let obj={x:200}
    let obj2={y:500}
    Object.defineProperty(obj2,"x",{
        get() {
            return obj.x
        },
        set(v) {
            obj.x=v
        }
    })
</script>

浏览器

Vue中的数据代理

1.Vue中的数据代理：
通过vm对象来代理data对象中的属性的操作（读，写）
2.Vue中数据代理的好处：
更加方便操作data中的数据
3.基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每个添加到vm上的属性，都指定一个getter/setter.
在getter/setter里面去操作data中的对应的属性