vue2的数据代理及Object.defineProperty方法

数据代理必须知道Object.defineProperty方法，在vue的底层很多都用到了它，比如数据代理、数据劫持、计算属性

let person = {
  name:'张三',
  sex:'男'
}
需求：现在往张三添加添加一个age：18
//传三个参数，第一个参数对象（person），第二个参数属性名age，第三个参数配置项{}（最常用的是value）
Object.defineProperty(person,'age',{
  value:18
})
console.log(person)

age是不可以被枚举的(枚举的通俗意思是不参与遍历的)需要配置项

let number = 18
let person = {
  name:'张三',
  sex:'男',
  age:number
}

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

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

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

console.log(person)

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

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

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

数据劫持：把_data所有的属性遍历变成带有geter和seter，劫持干了两件事修改数据和解析模板