Vue中数据代理

1.什么是数据代理

概念： 通过一个对象代理对另一个对象中属性的操作。一般包含（读/写）。

可通过Object.defineProperty（）实现。

Object.defineProperty()是js提供的一个方法，该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法： Object.defineProperty（obj，prop，descriptor）

参数：

obj（必传）

要定义属性的对象。也就是我们的目标对象，即我们要在哪个对象上进行属性的定义或修改。

prop（必传）

要定义或修改属性的名称。

descriptor（必传）

要定义或修改的属性描述符。可以这么理解，该参数是一个对象，我们可以通过这个对象的一些属性去定义目标属性的特性。

示例：通过person中.age修改number。通过修改number设置person.age的值。

let number = 18
let person ={
  name:'张三'
  sex：'男'，
}

Object.defineProperty(person,age,{
    //value:18,
    //enumerable:true,  //控制属性是否可以枚举
    //writable:true,    //控制属性是否可以被修改
    //configurable:true //控制属性是否可以被删除

    //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
    get(){
      console.log('读取age属性')
      return number;
    }

    //当有人修改oerson的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
    set(value){
    console.log('修改age属性，值为：',value)
    number = value
  }
})

2.Vue中实现

在一个vue文件中：

const vm = new Vue({
    el:'#root',
    data:{
        name:'前端'，
        frame：'Vue'
    }
})

其中，vm是一个Vue实例。Vue中有data属性。

在控制台中可以看到：

其中的name，和frame都需要通过getter获取对应的data数据。

_data也就是data数据在vm实例中的值。并且通过数据劫持 实现响应式。

下图为数据代理图示：

data ==>vm._data 收集数据。

vm._data ==> vm中name，address。数据代理。通过Object.defineProperty()实现。

3.总结

1.Vue中的数据代理：

​ 通过vm对象来代理data对象中的属性的操作（读/写）

2.Vue中数据代理的好处。

​ 更加方便的操作data中的数据。否知只能每一个data属性调用时都得为：{{ _data.name }}

3.基本原理：

a.通过Object.defineProperty()把data对象中所有属性添加到vm上。

b.为每一个添加到vm上的属性，都指定一个getter/setter。

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