数据劫持

Vue2的状态响应性，主要通过Object.defineProperty()来实现，通过设置getter和setter完成。这一过程我们称之为数据劫持。

学会Object.defineProperty()的使用，然后完成下面这个练习

练习：实现数据劫持

const state = {
  count: 0
}

convert(state)

function convert(obj) {
 // 补充完整
}

答案

const state = {
  count: 0
}

convert(state)

function convert(obj) {
  Object.keys(obj).forEach(key => {
    if(typeof obj[key] === 'object') {
      convert(obj[key])
    }

    let internalVal = obj[key]
    Object.defineProperty(obj, key, {
      get() {
        console.log(`getting ${key}: ${ internalVal}`)
        return internalVal
      },
      set(newVal) {
        console.log(`setting ${key}: ${ newVal },old value is ${internalVal}`)
        internalVal = newVal
      }
    })
  })
}

可以看到，我们成功实现了数据劫持，当我们访问state.count时，会触发getter，当修改state.count时，会触发setter。

有了这个基础以后，我们可以尝试去实现自动更新的功能，即依赖追踪。

数据劫持 ​

练习：实现数据劫持 ​

答案 ​

数据劫持

练习：实现数据劫持

答案