Vue数据代理底层解析（Object.defineProperty）

数据代理： 通过一个对象代理对另一个对象中的属性的操作(读/写)
通俗易懂来讲就是给一个对象添加属性，对该对象进行读/写data数据操作
模拟Vue数据代理的的实现：
1.数据描述符

//1.模拟一个person对象
let person = {name: '李四',sex: '男'}
//2.利用数据代理进行操作该对象
Object.defineProperty(person,'age',{
	value: 18，
	enumerable: true, //控制属性是否可以枚举，默认值是false
	writable: true, //控制属性是否可以被修改，默认值是false
	configurable: true, //控制属性是否可以被删除，默认值是false
})
console.log(person)	//{name:'李四',sex: '男',age:'18'}
//此时的age是不能被枚举的（也就是遍历person对象时age不会遍历）
//解决方案是加入enumerable为true的配置项

//此时又出现另一个问题：更改了person.age = 19，打印输出person还是显示{name:'李四',sex: '男',age:'18'}
//解决方案是加入writable，删除同理configurable

2.访问描述符

 let number = 18
 let person = {name: '李四',sex: '男'}
 Object.defineProperty(person,'age',{
    //当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
    get(){
      //每次访问age都会触发get函数的调用
      return number  //实现了age的值随number变化而变化
    },
    //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到具体修改值
    set(value){
      console.log('有人修改了age属性',value);
      number = value
    }
 })

总结：多上手打印回调函数返回值，可以清楚看到监听对象的变化，vue底层计算属性也用了该方法