vue.js中this为什么可以访问属性的属性

Question

如图所示，在官方的注释中说this指向实例的，那么a就不是他的直接属性，那为什么可以直接调用呢？

Answer 1

我觉得应该这么理解：
el、data、computed都应该理解为Vue对象的声明对象内容的关键字，而不是它的直接属性。
那么在data声明的就是它（vm本身）的数据属性，在computed中声明的就是它的计算属性，在methods中声明的就是它的方法。

Answer 2

Function.prototype.bind()

在 JS 中函数是可以绑定 this 所指向的对象的。你可以获取 a 属性说明在调用该方法时 vue.js 会将 vm 实际绑定上去，具体可以看看 vue.js 实现源码。通过上面的链接楼主可以了解一下 bind() 函数的用法。

Answer 3

应该是在Vue这个构造函数里就做了bind处理的。

Answer 4

简单的说， vue 在初始话的过程中把 data 复制到了它的实例上，这样做的原因大概是方面用户使用。

想看实现可以看源码的：

Vue.prototype._initData = function () {
  var dataFn = this.$options.data
  var data = this._data = dataFn ? dataFn() : {} // 这里就是 data 对象
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object.',
      this
    )
  }
  var props = this._props
  // proxy data on instance
  var keys = Object.keys(data)
  var i, key
  i = keys.length
  while (i--) {    // 这里循环绑定在 vm  
    key = keys[i]
    // there are two scenarios where we can proxy a data key:
    // 1. it's not already defined as a prop
    // 2. it's provided via a instantiation option AND there are no
    //    template prop present
    if (!props || !hasOwn(props, key)) {
      this._proxy(key) // 具体在这里进行绑定
    } else if (process.env.NODE_ENV !== 'production') {
      warn(
        'Data field "' + key + '" is already defined ' +
        'as a prop. To provide default value for a prop, use the "default" ' +
        'prop option; if you want to pass prop values to an instantiation ' +
        'call, use the "propsData" option.',
        this
      )
    }
  }
  // observe data
  observe(data, this)
}

源码：https://github.com/vuejs/vue/...