Vue2.0源码中的巧妙设计——代理proxy

直接copy今天要学习的源码，扫一眼，然后先跳过。

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)
}

代理是很常见的设计模式，一个对象访问另一个对象不能直接访问，需要通过第三方的话，我们就称之为代理。很典型的例子，就是我们前端解决跨域时，可以通过webpack或者node这样的第三方转接，设置代理。

今天要讨论的源码，就是vue中关于代理的一个巧妙应用。

先提个问题——Vue里，如果我们想要获取实例中的data，我们一般怎么做？

假如data是这样，现在要在getMessage里获取这个message。

var vm = new Vue({
  el: '#app',
  data: {
    message: '你好'
  },
  methods: {
    getMessage: function () {
    }
  }
})

没错，就是this.message！

很简单对吧，但是，为什么this.message这样的方式就能获取到"message"？

再想一个问题，这里的this指向的是什么？

从this.message能获取到"message"来看，this应该指向的是data才对。但是，如果你动手打印一下，就会发现，this指向的是当前Vue实例。

从Vue实例直接获取到了message，这是怎么做到的，难道message直接挂载到了Vue实例上了吗？你看一下打印的结果，就会发现，事实上并没有。

迷雾重重，下面是解开谜底的时刻

proxy(vm, `_data`, key)//这里的'_data',就是挂在到vue实例上的data

在vue源码初始化data的initData()方法里，有这样一行，是的，就是调用了我们开局copy的那段代码的proxy方法。

下面我再把那段方法贴出来，加上注释，我们仔细看一下

const sharedPropertyDefinition = {//定义一个对象，设置这个对象的属性
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop
}
export function proxy (target: Object, sourceKey: string, key: string) {
    //传入的值，以我们今天的例子看，就是target——vm,sourceKey——data,key——"message"
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]//访问vm[message]，就返回vm[data][message]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val//设值vm[message]，就变成设值vm[data][message]
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
    //通过defineProperty对vm[message]进行拦截,并将拦截的set和get方法通过sharedPropertyDefinition传进去
}

谜底已然揭晓，原来，当我们访问this.message时，框架把我们的访问给劫持了，并通过proxy代理到了this.data.message这。这样的设计，也是为了让我们写代码更省力，更简洁。

 

参考：

• 【Vue原理】代理 Data - 源码版