Vue源码解析：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？-优快云博客

data中定义了一个数据msg, vue实例上访问这个数据有两种方式，this.$data.msg 和 this.msg，请问，为vue如何实现this.msg能直接访问到data中的msg变量？？？data又为什么是个函数？

分析：

clone 下 vue 的项目源码，然后打开 src/core/instance/index.js

调用 init 方法时先进行了检查，确保已经使用 new Vue 初始化Vue（已构造一个作用域安全的构造函数）并将options 参数传入_init 内，this._init 是 Vue.prototype._init ,这个init方法来自于 ‘./init.js’ 中, 是下面initMixin(Vue)增加的

// src/core/instance/index.js

import { initMixin } from './init'
import { stateMixin } from './state'
import { renderMixin } from './render'
import { eventsMixin } from './events'
import { lifecycleMixin } from './lifecycle'
import { warn } from '../util/index'

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' && // 非生产模式
    !(this instanceof Vue) // 判断 this 对象的 prototype 是否存在于构造函数 Vue 的原型链上
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options) // 已构造一个作用域安全的构造函数：new Vue 进行初始化 Vue 并将options 参数传入_init 内 ，this._init 是 Vue.prototype._init ,这个init方法来自于 ‘./init.js’ 中, 是下面initMixin(Vue)增加的
}

initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)

export default Vue

进入 src/core/instance/init.js

此时先看这句代码 const vm: Component = this ，此处 this 即 vue实例，然后赋值给了 vm ， vm将做为参数向下传递，也就是一会以下的 vm 都是指向 vue 实例