[vue 源码] data初始化 proxy函数 实现原理

前言

在讲解proxy()之前，我们了解下proxy函数的上下文。

源码：vue-2.6.11/src/core/instance/state.js initData(vm: Component)

proxy(vm, _data, key)的实现

var vm = new Vue({
    data : {
        message: "hello vue",
    }
})

initData()函数 遍历 data , 并将data的每个属性遍历执行了代理处理。

vm._data = data || {};
const keys = Object.keys(data)
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }

我们需要使用Object.defineProperty()为vm.message实现代理，其实访问的是vm._data.message。

源码

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}

export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}