Vue2.x 的响应式

• 实现原理：

  • 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。

  • 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。

• 存在问题：

  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。

// 源数据
let person = {
  name:'张三',
  age:18
}

// 模拟Vue2中实现响应式
// 只有 get 和 set 实现查和改，不能实现增和删的响应式
// 每一个源数据的属性都要去定义一次，麻烦（此处为了方便直接写，实际可以用循环去实现属性定义）
let p = {}
Object.defineProperty(p,'name',{
  configurable:true, // 为了测试删除属性应变成可配置
  get(){ //有人读取name时调用
    return person.name
  },
  set(value){ //有人修改name时调用
    console.log('有人修改了name属性，我发现了，我要去更新界面！')
    person.name = value
  }
})
Object.defineProperty(p,'age',{
  get(){ //有人读取age时调用
    return person.age
  },
  set(value){ //有人修改age时调用
    console.log('有人修改了age属性，我发现了，我要去更新界面！')
    person.age = value
  }
})