一. 从github获取vue开发版本的源码
git clone https://github.com/vuejs/vue.git
二. 从实例化vue (new vue)开始讲解
想了解“为什么Vue实例化后，通过this.能获取到data内的数据”必须对call函数内置方法有所了解,如有认识模糊的话可以参考JS的call方法的作用解释，简单易懂
1. new 实例化Vue首先进入的src/core/instance/index.js
// vue其实就是 function 实现的 class
function Vue (options) {
if (process.env.NODE_ENV !== 'production' &&
!(this instanceof Vue)
) {
warn('Vue is a constructor and should be called with the `new` keyword')
}
// new Vue进行初始化 Vue 并将options 参数传入_init 内 ，this._init 是原型中的方法 ,这个init方法来自于 ‘./init’ 中
this._init(options)
}
在实例化时，执行this._init(options)，这个_init内置方法是下面initMixin(Vue)增加的
2. 进入src/core/instance/init.js 查看initMixin方法
initState(vm) // 初始化状态(这个状态包含data props methods), 这个初始化解决了实例化是通过 this 获取 data
3. 进入src/core/instance/state.js查看initState方法
initData(vm)就是Vue实例化后，初始化data 通过this.能获取到data内的数据
// 初始化状态(这个状态包含data props methods), 这个初始化解决了实例化是通过 this 获取 data props methods 内数据
export function initState (vm: Component) {
vm._watchers = []
const opts = vm.$options
if (opts.props) initProps(vm, opts.props)
if (opts.methods) initMethods(vm, opts.methods)
if (opts.data) {
// 初始化data
initData(vm)
} else {
observe(vm._data = {}, true /* asRootData */)
}
if (opts.computed) initComputed(vm, opts.computed)
if (opts.watch && opts.watch !== nativeWatch) {
initWatch(vm, opts.watch)
}
}
initMixin内执行了initState，初始化data数据
function initData (vm: Component) {
let data = vm.$options.data
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
if (!isPlainObject(data)) {
data = {}
process.env.NODE_ENV !== 'production' && warn(
'data functions should return an object:\n' +
'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
vm
)
}
// 对比props methods data中的 key 是否相同 如果相同报出警告 禁止相同
// proxy data on instance
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods
let i = keys.length
while (i--) {
const key = keys[i]
if (process.env.NODE_ENV !== 'production') {
if (methods && hasOwn(methods, key)) {
warn(
`Method "${key}" has already been defined as a data property.`,
vm
)
}
}
if (props && hasOwn(props, key)) {
process.env.NODE_ENV !== 'production' && warn(
`The data property "${key}" is already declared as a prop. ` +
`Use prop default value instead.`,
vm
)
} else if (!isReserved(key)) {
proxy(vm, `_data`, key)
}
}
// observe data
observe(data, true /* asRootData */)
}
initData 方法中getData将就是实现Vue实例化后，通过this.能获取到data内的数据
data = vm._data = typeof data === 'function'
? getData(data, vm)
: data || {}
我们再看看 getData方法是怎样实现Vue实例化后，通过this.能获取到data内的数据
export function getData (data: Function, vm: Component): any {
// #7573 disable dep collection when invoking data getters
pushTarget()
try {
// data 函数执行的时候将 return 内的数据 返回出来 vm函数可以通过 this. 获取到data 内的数据 ，也就是我们在实例的时候将 this. 能获取到data 内数据原因
return data.call(vm, vm)
} catch (e) {
handleError(e, vm, `data()`)
return {}
} finally {
popTarget()
}
}
三、总结
不卖关子啦！其实Vue实例化的时候，通过getData方法中call修改this指针来实现Vue实例后能获取到data体内的数据，小伙伴可能感觉认为我将vue初始化部分流程拉出来是的你越来越糊涂，但是如果我不讲上面的代码拉出来，我直接来这句总结，你会更加懵的🙂🙂🙂
