回顾Object.defineProperty

回顾Object.defineProperty方法：

let number = 18
let person = {
  name:'张三',
  sex:'男',
}
Object.defineProperty(person,'age',{
  value:18,
  enumerable:true, // 控制属性是否可以枚举(遍历),默认值是false
  writable:true, // 控制属性是否可以被修改，默认值是false
  configuranle:true, // 控制属性是否可以被删除，默认值是false
  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get:function(){  // 可以缩写 去掉function
      return number
  }
  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value){  // 可以缩写 去掉function
      number = value // 修改的值是value
  }
})

数据代理：

// 数据代理就是通过一个对象代理对另一个对象中属性的操作（读/写）
let obj = {x:100}
let obj2 = {y:200}
// 想通过obj2能读到x  或者修改x
Object.defineProperty(obj2,'x'{
  get(){
    return obj.x
  },
  set(){
    obj.x = value
  }
})

1、Vue中的数据代理：

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

2、Vue中数据代理的好处：

​ 更加方便的操作data中的数据

3、基本原理：

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

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

​ 在getter/setter内部去操作 (读/写) data中对应的属性