vue中的数据代理

一、什么是数据代理

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

let obj = {x:100}
let obj2 = {y:200}


Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    },
    set(value){
        obj.x = value
    }
})

// 这时我们可以通过obj2来操作obj的x属性，并且在控制台中我们也可以看到obj2有一个x属性，同时还有setter和gette方法
```

代理属性的属性值在控制台中默认是不显示的，当我们左键点击之后就会从目标位置读取该属性值。 

在实例化中定义的data对象会成为vm中的`_data`属性，此时我们想要在模板中访问data中的数据时就需要使用`{{ _data.name }}`,这样获取数据太不方便了
此时，vue做了另一件事情，他在实例中添加了两个属性，分别是name和address，这两个数据的值分别对应着`_data`中的name和address的值，这样做的目的只有一个，就是让编写代码的时候更加方便，而这一系列操作都是通过`Object.defineProperty`来实现的

//创建一个person对象

let person = {
    name:"张三",
    sex:"男" 
}



//Object.defineProperty`有三个参数，第一个是目标对象，第二个是添加的属性名，第三个是配置项

Object.defineProperty(person,"age",{
    value:18
})


console.log(person)

不可枚举就是不可以遍历的属性，我们可以使用`Object.keys`来遍历以下对象中的属性名，可以看到只能遍历出name和sex两个属性名，而取不到age属性

//我们还可以通过另一个方法来验证，这次通过for..in来试一下
for(let key in person){
    console.log("@",person[key])
}
console.log(person)