一、第三部分：初始化相关功能
我们继续上一章，第三部分是对各类功能的初始化。这个章节内容较多，大家还需有耐心。
/**
*第三部分，初始化相关功能
*/
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
initProxy(vm)
} else {
vm._renderProxy = vm
}
// expose real self
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')1、initProxy
initProxy的作用是设置vm._renderProxy。
首先判断当前是否为开发环境，如是，则调用initProxy，否则直接将vm对象赋值给vm._renderProxy.Proxy是ES6新增特性，大家可以先了解下相关知识。我们先来看下initProxy。
initProxy = function initProxy (vm) {
if (hasProxy) {
// determine which proxy handler to use
var options = vm.$options;
var handlers = options.render && options.render._withStripped
? getHandler
: hasHandler;
vm._renderProxy = new Proxy(vm, handlers);
} else {
vm._renderProxy = vm;
}
};这段主要是给vm._renderProxy设置一个代理，进行一些拦截，不符合的策略(对象上不存在的属性，或者映射表中没有的)，提示告警，至于vm._renderProxy是什么，我们后面详细描述。
2、initLifecycle
initLifecycle的作用是初始化一系列变量
先看下前一段代码：
var options = vm.$options;
// locate first non-abstract parent
var parent = options.parent;
if (parent && !options.abstract) {
while (parent.$options.abstract && parent.$parent) {
parent = parent.$parent;
}
parent.$children.push(vm);
}源码中注释翻译成中文的意思是，定位到第一个非抽象的父组件。要了解非抽象组件，那我们先了解下抽象组件，官方定义是："自身不会渲染一个 DOM 元素，也不会出现在父组件链中"，keep-alive以及transition都是这类组件，说白了，就是不对其包裹的内容进行渲染，保留其状态。不是抽象组件的组件都是非抽象组件。
parent不是为undefined，并且标记位非抽象，通过while循环父组件链，找出第一个非抽象的组件，并赋值为parent，该parent的子组件数据添加vm对象，形成一个环形链表。
我们继续看剩余的代码:
vm.$parent = parent
vm.$root = parent ? parent.$root : vm
vm.$children = []
vm.$refs = {}
vm._watcher = null
vm._inactive = null
vm._directInactive = false
vm._isMounted = false
vm._isDestroyed = false
vm._isBeingDestroyed = false主要是对vm对象的相关属性初始化，可以查阅VUE官方文档实例属性进行了解。
3、initEvents
initEvents的作用存储父组件绑定当前子组件的事件，保存到vm._events中。
Vue中的事件分为两种，一种是DOM原始的事件，比如click，focus等，另一种就是自定义事件，对事件机制不了解的可以看VUE探索第五篇-组件(Component)，下面我们来用具体的实例描述事件如何存储到vm._events中的。
<child @childclick="getMsg" v-on:click.native="postMsg" @hook:created="parentCreate"></child>
...
var childComponent = Vue.component('child',{
template:"<div><p @click='showMsg'>{{childMsg}}</p></div>",
data:function(){
return {
childMsg:"Hello child"
}
},
created:function(){
console.log("子组件created");
},
props:['msg1','msg2'],
methods:{
showMsg:function(){
this.$emit('childclick', '子组件抛出去吧');
}
}
});
var vm = new Vue({
el:"#app",
components:{
childComponent
},
created () {
console.log('组件 created')
},
data:{
msg:'tttt'
},
methods:{
getMsg:function(data){
console.log(data);
},
postMsg () {
console.log('父组件中响应的')
},
parentCreate(){
console.log("父组件 created");
}
}
})child组件上绑定了三个事件，分别是childclick(自定义)，click(dom原生,需要加上.native)，以及钩子事件(@hook:created)。
看下initEvent源码，代码不多，寥寥几行。
function initEvents (vm) {
//初始化vm._events对象
vm._events = Object.create(null);
//是否存在hook:钩子事件
vm._hasHookEvent = false;
// init parent attached events
var listeners = vm.$options._parentListeners;
if (listeners) {
updateComponentListeners(vm, listeners);
}
}第一行，初始化一个vm._events对象。
第二行，定义了一个标识位_hasHookEvent，用来表示是否有hook:这种钩子事件，hook:可以从父组件上定义子组件的生命周期钩子。
第三行，获取_parentListeners，表示父组件对子组件的监听。这个属性在父组件vm上是没有的，在子组件childComponent对象上的值是
_parentListeners存储了其中的两个事件，有同学在这里可能有两个疑惑，这个_parentListeners是什么时候赋值的？为何没有看到原始dom的事件(click)?
第一个问题涉及到到组件的创建流程，后续专门阐述。第二个问题，需要理解下“父组件绑定当前组件(子组件)的事件”，原始dom事件显然不属于这个范畴，实际上它有单独的处理流程，这里不展开讲。
至此我们已经获取到了事件对象，下面调用updateComponentListeners完成对事件的保存。
export function updateComponentListeners (
vm: Component,
listeners: Object,
oldListeners: ?Object
) {
target = vm
updateListeners(listeners, oldListeners || {}, add, remove, vm)
target = undefined
}该方法有三个入参，vm表示childComponent对象本身，listeners即_parentListeners对象，oldListeners为undefined。
第一行，暂时缓存vm对当前target对象。当执行流程完成后在第三行重置。target在后面的remove中用的着。
主要看下updateListeners方法，
export function updateListeners (
on: Object,
oldOn: Object,
add: Function,
remove: Function,
vm: Component
) {
//定义变量
let name, def, cur, old, event
//循环遍历事件监听对象
for (name in on) {
//为def,cur赋值事件对象
def = cur = on[name]
//oldOn为undefined,故old也是undefined
old = oldOn[name]
//对name进行.passive、.capture和.once的修饰符判(&,!,~)
event = normalizeEvent(name)
/* istanbul ignore if */
//对weex框架的支持，暂不研究
if (__WEEX__ && isPlainObject(def)) {
cur = def.handler
event.params = def.params
}
//判断cur是否为undefined(不存在),即报错
if (isUndef(cur)) {
process.env.NODE_ENV !== 'production' && warn(
`Invalid handler for event "${event.name}": got ` + String(cur),
vm
)
} else if (isUndef(old)) {//判断old对象是否为undefined,当old不存在时执行
if (isUndef(cur.fns)) {//判断新对象的fns对象是否为undefined
//创建事件函数调用器
cur = on[name] = createFnInvoker(cur)
}
//添加新的事件处理
add(event.name, cur, event.once, event.capture, event.passive, event.params)
} else if (cur !== old) {//如果新对象与老对象不一致，则用新的覆盖
old.fns = cur
on[name] = old
}
}
//遍历oldOn事件，如果在当前事件中找不到，就说明是待老化的，执行删除操作
for (name in oldOn) {
if (isUndef(on[name])) {
event = normalizeEvent(name)
remove(event.name, oldOn[name], event.capture)
}
}
}该方法是核心部分，主要作用监听事件的变化，对于新增的事件调用add方法保存，对于老化的事件调用remove方法删除。
具体细节请看相关的注释。这里我们主要看下add和remove方法。
function add (event, fn, once) {
if (once) {//一次性事件
target.$once(event, fn)
} else {
target.$on(event, fn)
}
}这是我们看到$once,$on方法，对这两个方法不了解的可以看下VUE API。这些方法封装在eventsMixin中(该方法我们在第二章节全局API初始化时介绍过)
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
if (Array.isArray(event)) {//如果event是数组，则递归调用
for (let i = 0, l = event.length; i < l; i++) {
this.$on(event[i], fn)
}
} else {//将新增的事件push到vm._events数组中
(vm._events[event] || (vm._events[event] = [])).push(fn)
// optimize hook:event cost by using a boolean flag marked at registration
// instead of a hash lookup
//有:hook钩子事件则标注为true
if (hookRE.test(event)) {
vm._hasHookEvent = true
}
}
return vm
}该方法主要就是将事件push到vm._events[]中。继续看下$once
Vue.prototype.$once = function (event: string, fn: Function): Component {
const vm: Component = this
function on () {//删除后执行
vm.$off(event, on)
fn.apply(vm, arguments)
}
on.fn = fn
vm.$on(event, on)
return vm
}这里用了一个讨巧的方式，重新封装了on方法，调用$off方法删除事件，再执行一次。
再看下remove方法。
function remove (event, fn) {
target.$off(event, fn)
}调用了target.$off方法删除，还记得的target吧，就是当前的组件对象。
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
const vm: Component = this
// all
//不传入参数,则全部删除，vm._events置为空
if (!arguments.length) {
vm._events = Object.create(null)
return vm
}
// array of events
//对于event数组,则递归调用
if (Array.isArray(event)) {
for (let i = 0, l = event.length; i < l; i++) {
this.$off(event[i], fn)
}
return vm
}
// specific event
//以下是对单个事件进行处理.
//查找该事件的监听数组
const cbs = vm._events[event]
//事件监听如不存在，则直接返回实例
if (!cbs) {
return vm
}
//如果监听事件为空，则置空该事件的监听数组
if (!fn) {
vm._events[event] = null
return vm
}
//如果指定了监听事件，循环找出该事件，从监听数组中删除
if (fn) {
// specific handler
let cb
let i = cbs.length
while (i--) {
cb = cbs[i]
if (cb === fn || cb.fn === fn) {
cbs.splice(i, 1)
break
}
}
}
return vm
}看下面的vm._events的数据结构，这段代码就不难理解，将对应的监听事件从数组中删除。
至此，initEvents分析完成，正如开头所讲，它的作用是存储父组件绑定当前子组件的事件，打印下vm._events结果:
保存好后接下来就是触发事件，即$emit，在本篇callhook章节会调用。
4、initRender
initRender 定义vm._c和 vm.$createElement方法
Vue有两种方法编写html内容，一种就是我们常用的template，另一种就是render。render在有些情况下会比template更加简洁，不熟悉的同学可以先了解下render相关知识，我们将上面的例子中template改写成render函数。
render:function(createElement){
return createElement('div',
[createElement('p',
{
on:{
click:this.showMsg
}
},
this.childMsg
)
]
)
},无论是template，还是我们的手写的render，最后都会将描述成VDOM，VDOM的内容我们后续专门章节描述。
接下来我们看下initRender源码。
export function initRender (vm: Component) {
//初始化_vnode,staticTrees属性
vm._vnode = null // the root of the child tree
vm._staticTrees = null // v-once cached trees
const options = vm.$options
//获取父vnode
const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
const renderContext = parentVnode && parentVnode.context
//将 dom 节点映射成 Slot
vm.$slots = resolveSlots(options._renderChildren, renderContext)
//作用域插槽赋值
vm.$scopedSlots = emptyObject
// bind the createElement fn to this instance
// so that we get proper render context inside it.
// args order: tag, data, children, normalizationType, alwaysNormalize
// internal version is used by render functions compiled from templates
//定义._c方法，对template进行render处理的方法
vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
// normalization is always applied for the public version, used in
// user-written render functions.
//.$createElement方法对render处理的方法
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)
// $attrs & $listeners are exposed for easier HOC creation.
// they need to be reactive so that HOCs using them are always updated
// $attrs & $listeners这个属性进行数据监听
const parentData = parentVnode && parentVnode.data
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
!isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
}, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
!isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
}, true)
} else {
defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
}
}首先对_vnode与_staticTrees进行初始化。接着对$slots,$scopedSlots赋值。vm._c与vm.$createElement分别是对template和render函数处理的方法，这里只定义，现阶段做个大概的了解即可，相关的内容我们在编译的章节仔细详解。
调用defineReactive实现对$attrs与$listeners的监听，该方法在后面响应式原理章节中详解。
5、callHook(vm, 'beforeCreate')
我们先来讲下callHook方法，负责调用生命周期的钩子相关方法。
export function callHook (vm: Component, hook: string) {
// #7573 disable dep collection when invoking lifecycle hooks
//记录当前watch的实例
pushTarget()
//获取相应钩子的事件处理方法数组
const handlers = vm.$options[hook]
//执行对应的事件方法
if (handlers) {
for (let i = 0, j = handlers.length; i < j; i++) {
try {
handlers[i].call(vm)
} catch (e) {
handleError(e, vm, `${hook} hook`)
}
}
}
//触发@hook:定义的钩子方法
if (vm._hasHookEvent) {
vm.$emit('hook:' + hook)
}
//释放当前的watch实例
popTarget()
}这部分代码比较清晰，pushTarget，popTarget是数据响应的相关方法，后续再详解。
callHook(vm, 'beforeCreate')就是从vm.$options中拿到beforeCreate的钩子方法数组(在上一篇我们专门讲了vm.$options，将定义Vue对象时相关的方法都保存在该对象中，其中就包括自定义的生命周期的方法），传入vm对象作为上下文(this)，循环执行。
接下来判断vm._hasHookEvent是否为true，这就是initEvents中定义的标识，在该章节实例中的子组件定义了
@hook:created="parentCreate"所以就会触发该方法，我们看下$emit方法，该方法在eventsMixin中有定义。
Vue.prototype.$emit = function (event: string): Component {
const vm: Component = this
...
//获取该事件对应的事件处理器数组
let cbs = vm._events[event]
if (cbs) {
cbs = cbs.length > 1 ? toArray(cbs) : cbs
const args = toArray(arguments, 1)
//循环执行
for (let i = 0, l = cbs.length; i < l; i++) {
try {
cbs[i].apply(vm, args)
} catch (e) {
handleError(e, vm, `event handler for "${event}"`)
}
}
}
return vm
}此时，仅做了一些方法的初始化，还没有涉及到state，provide等属性，所以在beforeCreate中调用el，data都是undefined。以VUE源码学习第三篇--new Vue都干了啥(概述)的样例为例：
beforeCreate:function(){
console.log("beforeCreate");
console.log("this el:"+this.$el);//undefined
console.log("this data:"+this.$data);//undefined
console.log("this msg:"+this.msg);//undefined
}6、initInjections和initProvide
initInjections获取inject定义的各属性值并增加对该属性的监听。
initProvide设置 vm._provided值，以便子组件逐级查找。
inject与provide配合实现了属性的多级传递，官方的说法"以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效"。具体的用法大家可参考下官网API，
export function initInjections (vm: Component) {
//将inject保存到result字面量对象对象中
const result = resolveInject(vm.$options.inject, vm)
//增加该属性的监听
if (result) {
toggleObserving(false)
Object.keys(result).forEach(key => {
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
defineReactive(vm, key, result[key], () => {
warn(
`Avoid mutating an injected value directly since the changes will be ` +
`overwritten whenever the provided component re-renders. ` +
`injection being mutated: "${key}"`,
vm
)
})
} else {
defineReactive(vm, key, result[key])
}
})
toggleObserving(true)
}
}前面我们分析过normalizeInject方法，主要是将inject规整后设置给vm.$options。我们继续看下initInject，该方法主要分两部分：
1、resolveInject方法中，通过inject属性查到到对应父级组件上的provide的值，并保存到result字面量对象中，格式如下:{foo: "this is foo"}。
2、增加对该属性的监听。
我们来分析下第一部分(resolveInject)，第二部分关于属性的监听，我们会在后面响应式原理一起说。
export function resolveInject (inject: any, vm: Component): ?Object {
if (inject) {
// inject is :any because flow is not smart enough to figure out cached
//创建一个纯对象
const result = Object.create(null)
//判断是否支持ES6的特性Symbol和Reflect，支持则采用Reflect.ownKeys，否则采用Object.keys
const keys = hasSymbol
? Reflect.ownKeys(inject).filter(key => {
/* istanbul ignore next */
//筛选可枚举的属性
return Object.getOwnPropertyDescriptor(inject, key).enumerable
})
: Object.keys(inject)
//对key数组进行循环
for (let i = 0; i < keys.length; i++) {
const key = keys[i]
const provideKey = inject[key].from
let source = vm
//向上查找父级组件对象的provide上包含key的对象，并保存到result中
while (source) {
if (source._provided && hasOwn(source._provided, provideKey)) {
result[key] = source._provided[provideKey]
break
}
source = source.$parent
}
if (!source) {//如果没有父级组件匹配上，则判断是否有default值
if ('default' in inject[key]) {
//将default值赋值给属性对象
const provideDefault = inject[key].default
result[key] = typeof provideDefault === 'function'
? provideDefault.call(vm)
: provideDefault
} else if (process.env.NODE_ENV !== 'production') {
warn(`Injection "${key}" not found`, vm)
}
}
}
return result
}
}这部分的代码逻辑也比较清晰：
1、过滤出inject定义的属性。
2、逐级向上查找属性在父级组件对象上的provide定义值，并保存到result中。
3、如果没有查到，就启用default值，default值如果都没有，不好意思，给出提示告警。
这里有个知识点，关于Reflect.ownKeys和Object.keys的区别。Object.keys是表示给定对象的所有可枚举属性的字符串数组（ Object.getOwnPropertyNames中可枚举的属性）；Reflect.ownKeys不含包括Object.keys的属性，还包括了 Symbol 属性。官方文档中有以下说明"在该对象中(inject)你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作"。
initProvide比较简单，大家看下代码即可明白。
export function initProvide (vm: Component) {
const provide = vm.$options.provide
if (provide) {
vm._provided = typeof provide === 'function'
? provide.call(vm)
: provide
}
}7、initState
initState从源码中可以很清楚看到是对prop，method，data，computed，watch的初始化。
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) {
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)
}
}接下来我们一个一个看。
（1）initProps
initProps获取props属性的值，并增加监听。
前一章节我们讲到通过normalizeProps方法，将props进行了规整，该实例规整后vm.$options.props格式如下：
这个例子中包含了两个属性对象likes，title。initProps方法将会对这个对象进行再次加工。
function initProps (vm: Component, propsOptions: Object) {
//获取父组件的propsData,该属性主要是用于测试
const propsData = vm.$options.propsData || {}
//存放最终的props对象到vm._props
const props = vm._props = {}
//将props的key缓存到vm.$options._propKeys，为了后续更新时的快速的查找，而不需要动态的枚举
const keys = vm.$options._propKeys = []
const isRoot = !vm.$parent
// root instance props should be converted
if (!isRoot) {
toggleObserving(false)
}
//循环处理props的属性对象
for (const key in propsOptions) {
//存储key
keys.push(key)
//1、校验props，包括对类型的校验以及产生最后的属性值
const value = validateProp(key, propsOptions, propsData, vm)
/* istanbul ignore else */
if (process.env.NODE_ENV !== 'production') {
const hyphenatedKey = hyphenate(key)
if (isReservedAttribute(hyphenatedKey) ||
config.isReservedAttr(hyphenatedKey)) {
warn(
`"${hyphenatedKey}" is a reserved attribute and cannot be used as component prop.`,
vm
)
}
defineReactive(props, key, value, () => {
if (vm.$parent && !isUpdatingChildComponent) {
warn(
`Avoid mutating a prop directly since the value will be ` +
`overwritten whenever the parent component re-renders. ` +
`Instead, use a data or computed property based on the prop's ` +
`value. Prop being mutated: "${key}"`,
vm
)
}
})
} else {
//2、对props的各属性进行赋值，并进行监听
defineReactive(props, key, value)
}
// static props are already proxied on the component's prototype
// during Vue.extend(). We only need to proxy props defined at
// instantiation here.
//3、代理到vm对象上，使用vm.xx或者组件中this.xx直接访问props属性
if (!(key in vm)) {
proxy(vm, `_props`, key)
}
}
toggleObserving(true)
}首先定义了属性对象以及key存放的位置，为vm._props以及vm.$options._propKeys，然后对props中的每个属性对象进行循环，在该循环中，做了如下的处理：
1、对props对象校验，并获取属性对象的值，比如like的值是“this is like phone”。当前没有的话就是undefined。
2、调用defineReactive对props(vm._props)赋值，并添加属性监听(在响应式原理部分将详细讲解)
3、调用proxy将props的属性对象代理到vm上，使用vm.xx或者组件中this.xx直接访问props属性。
执行完成后，上面的例子最后生成的vm._props对象为：
（2）initMethods
是对methods的初始化，将methods定义的方法绑定到vm上，我们看下源码：
function initMethods (vm: Component, methods: Object) {
const props = vm.$options.props
for (const key in methods) {
if (process.env.NODE_ENV !== 'production') {
if (methods[key] == null) {
warn(
`Method "${key}" has an undefined value in the component definition. ` +
`Did you reference the function correctly?`,
vm
)
}
//判断props中是否已经定义了该方法，如果是，则提示已经定义，可见props的优先级要大于method中定义
if (props && hasOwn(props, key)) {
warn(
`Method "${key}" has already been defined as a prop.`,
vm
)
}
//判断vm对象中是否已经定了该方法，如是则提示冲突,尽量不要以_ 或者 $打头，这个是vue自带属性和方法的命名规范，避免冲突
if ((key in vm) && isReserved(key)) {
warn(
`Method "${key}" conflicts with an existing Vue instance method. ` +
`Avoid defining component methods that start with _ or $.`
)
}
}
//把每个methods[key]绑定到vm上，并将methods[key]的this指向vm
vm[key] = methods[key] == null ? noop : bind(methods[key], vm)
}
}首先校验了props以及vm已有的方法是否冲突，然后将方法绑定到vm对象上。比如我们定义了如下的method的
methods:{
postMsg () {
console.log('父组件中响应的')
}
}执行完成后，会绑定到vm对象上
(3) initData
对data的初始化，主要是对定义的属性建立钩子函数，实现数据的绑定。代码如下：
function initData (vm: Component) {
let data = vm.$options.data
//保存data到vm._data中，判断data是否是function类型，对于组件必须是function
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
)
}
// proxy data on instance
//代理到vm实例上
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]
//确保data的属性不与method与props命名冲突
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)//代理到vm对象上
}
}
// observe data
//运行 observe 函数建立起 Observer 和钩子函数
observe(data, true /* asRootData */)
}首先从vm.$options.data获取data对象，并根据是否是function类型(组件必须是该类型)进行处理，转化为统一的字面量对象。接下来，与props类似，代理到vm对象上，最重要的是，调用observe建立Observer和劫持钩子函数，后续数据的变化都会触发其watcher对象，实现数据的绑定(这个方法在响应式原理章节再表)
对于组件，官方文档说话："data必须申明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象”。
我们看怎么实现的，答案在getData中。
return data.call(vm, vm)将vm对象设置为上下文，即this，所以，data中的this就是创建的新实例对象。
(4) initComputed
computed是vue重要的属性，与method相比，计算属性是基于它们的依赖进行缓存的，即计算属性中的涉及到的变量不变化的情况下，采用缓存的值，只在相关依赖发生改变时它们才会重新求值。我们来看下是如何实现的。
function initComputed (vm: Component, computed: Object) {
// $flow-disable-line
const watchers = vm._computedWatchers = Object.create(null)
// computed properties are just getters during SSR
const isSSR = isServerRendering()
for (const key in computed) {
//1、获取getter方法
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
if (!isSSR) {
// create internal watcher for the computed property.
//2、创建watcher订阅类
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
}
// component-defined computed properties are already defined on the
// component prototype. We only need to define computed properties defined
// at instantiation here.
if (!(key in vm)) {
//3、绑定到vm对象上，计算属性值
defineComputed(vm, key, userDef)
} else if (process.env.NODE_ENV !== 'production') {
if (key in vm.$data) {
warn(`The computed property "${key}" is already defined in data.`, vm)
} else if (vm.$options.props && key in vm.$options.props) {
warn(`The computed property "${key}" is already defined as a prop.`, vm)
}
}
}
}循环computed中每个属性，对属性进行如下的处理：
1、获取getter方法，如果没有显性定义，则默认是该函数。
2、创建watcher的订阅类(响应式原理章节再表)
3、绑定到vm对象上，计算属性值。
继续看defineComputed定义。
export function defineComputed (
target: any,
key: string,
userDef: Object | Function
) {
const shouldCache = !isServerRendering()
if (typeof userDef === 'function') {
sharedPropertyDefinition.get = shouldCache
? createComputedGetter(key)
: userDef
sharedPropertyDefinition.set = noop
} else {
....
}
//绑定到vm对象上，并对计算属性的getter和setter进行劫持
Object.defineProperty(target, key, sharedPropertyDefinition)
}通过Object.defineProperty实现对计算属性的getter和setter方法的劫持。调用getter方法时，实际调用createComputedGetter方法。
function createComputedGetter (key) {
return function computedGetter () {
const watcher = this._computedWatchers && this._computedWatchers[key]
if (watcher) {
//依赖收集，将订阅类添加到
watcher.depend()
//返回值
return watcher.evaluate()
}
}
}将定义的watcher类，加入到发布器dep中，实现依赖收集，当依赖变量发生变化，触发计算属性的重新计算。并返回其计算后的值。
对于这部分知识，目前阶段仅做了解，在后面的响应式原理章节中，我们会重点分析。
(5) initWatch
watch对属性的观察，当属性有变化时，会回调定义的函数，具体的实现方式可以参阅watch官方文档，
function initWatch (vm: Component, watch: Object) {
//循环watch中的属性
for (const key in watch) {
const handler = watch[key]
//包含多个handle，则循环创建watcher
if (Array.isArray(handler)) {
for (let i = 0; i < handler.length; i++) {
//创建watcher对象
createWatcher(vm, key, handler[i])
}
} else {
createWatcher(vm, key, handler)
}
}
}为每个handle回调函数创建一个watcher对象。
function createWatcher (
vm: Component,
expOrFn: string | Function,
handler: any,
options?: Object
) {
//如果是options对象，则取出handler对象
if (isPlainObject(handler)) {
options = handler
handler = handler.handler
}
//如果是方法名，则获取方法实体
if (typeof handler === 'string') {
handler = vm[handler]
}
//创建watch对象
return vm.$watch(expOrFn, handler, options)
}根据不同的表达，进一步获取handle方法，调用vm.&watch创建
Vue.prototype.$watch = function (
expOrFn: string | Function,
cb: any,
options?: Object
): Function {
const vm: Component = this
//如果cb还是字面量对象，则继续调用createWatcher
if (isPlainObject(cb)) {
return createWatcher(vm, expOrFn, cb, options)
}
options = options || {}
options.user = true
//创建watcher对象,进行监听
const watcher = new Watcher(vm, expOrFn, cb, options)
//设置了immediate，则立即调用
if (options.immediate) {
cb.call(vm, watcher.value)
}
return function unwatchFn () {
watcher.teardown()
}
}我们看到new Watcher对象，将这个对象添加到属性(expOrFn)的Dep中，每次对应的属性发送变化，都会触发回调函数(cb)执行。
同样，对于这 部分知识，当前阶段大家仅做了解即可，后面我们会专门分析。
8、callHook(vm, 'created')
调用create生命周期钩子方法，同5。此时已经初始化了相关属性，所以能获取到值，但是el节点还没有挂载，依然为undefined。以VUE源码学习第三篇--new Vue都干了啥(概述)的样例为例：
created:function(){
console.log("created");
console.log("this el:"+this.$el);//undefined
console.log("this data:"+this.$data);//[object Object]
console.log("this msg:"+this.msg);//tttt
}二、总结
本章节内容较多，主要是初始化相关的工作，我们再来回顾下这张导图。
