012_重学Vue_Vue数据监测原理

Vue数据监测原理

1. 创建一个监听对象，监听被监听对象的数据变化。
2. 为被监听对象每个属性（这里只监听一级属性，Vue会监听所以属性）生成get()、set()方法，get() 返回被监听对象对应属性，set() 设置被监听对象对应属性。
3. 创建 vm，并将监听对象赋值给vm._data。

let data = {
  id: '001',
  name: 'allen',
}

//创建一个监听对象，监听data中的数据变化
const obs = new Observer(data)

//创建一个vm实例
const vm = {}
vm._data = data = obs

function Observer(obj) {
  //取出所以的key
  const keys = Object.keys(obj)

  //为每个key创建数据代理
  keys.forEach((key) => {
    Object.defineProperty(this, key, {
      get() {
        console.log(`${key}属性被读取了。`)
        return obj[key]
      },
      set(val) {
        console.log(`${key}属性被修改了 ${obj[key]} =>`, val)
        obj[key] = val
      },
    })
  })
}

vm._data.name = 'liangle'