export function initLifecycle (vm: Component) { const options = vm.$options // locate first non-abstract parent let parent = options.parent if (parent && !options.abstract) {  while (parent.$options.abstract && parent.$parent) {   parent = parent.$parent  }  parent.$children.push(vm) // 自己把自己添加到父級(jí)的$children數(shù)組中 } vm.$parent = parent // 父組件實(shí)例 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}

// v-on如果寫在平臺(tái)標(biāo)簽上如：div,則會(huì)將v-on上注冊(cè)的事件注冊(cè)到瀏覽器事件中// v-on如果寫在組件標(biāo)簽上，則會(huì)將v-on注冊(cè)的事件注冊(cè)到子組件的事件系統(tǒng)// 子組件（Vue實(shí)例）在初始化的時(shí)候，有可能接收到父組件向子組件注冊(cè)的事件。// 子組件（Vue實(shí)例）自身模板注冊(cè)的事件，只要在渲染的時(shí)候才會(huì)根據(jù)虛擬DOM的對(duì)比結(jié)果// 來確定是注冊(cè)事件還是解綁事件// 這里初始化的事件是指父組件在模板中使用v-on注冊(cè)的事件添加到子組件的事件系統(tǒng)也就是vue的事件系統(tǒng)。export function initEvents (vm: Component) { vm._events = Object.create(null) // 初始化 vm._hasHookEvent = false // init parent attached events 初初始化腹肌組件添加的事件 const listeners = vm.$options._parentListeners if (listeners) {  updateComponentListeners(vm, listeners) }}export function updateComponentListeners ( vm: Component, listeners: Object, oldListeners: ?Object) { target = vm updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm) target = undefined}

export function initInjections (vm: Component) { // 自下而上讀取inject const result = resolveInject(vm.$options.inject, vm) if (result) {  // 設(shè)置為false 避免defineReactive函數(shù)把數(shù)據(jù)轉(zhuǎn)換為響應(yīng)式  toggleObserving(false)  Object.keys(result).forEach(key => {    defineReactive(vm, key, result[key])  })  // 再次更改回來  toggleObserving(true) }}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)  // 如果瀏覽器支持Symbol,則使用Reflect.ownkyes(),否則使用Object.keys()  const keys = hasSymbol   ? Reflect.ownKeys(inject)   : Object.keys(inject)  for (let i = 0; i < keys.length; i++) {   const key = keys[i]   // #6574 in case the inject object is observed...   if (key === '__ob__') continue   const provideKey = inject[key].from   let source = vm   // 當(dāng)provided注入內(nèi)容的時(shí)候就是把內(nèi)容注入到當(dāng)前實(shí)例的_provided中   // 剛開始的時(shí)候 source就是實(shí)本身，擋在source._provided中找不到對(duì)應(yīng)的值   // 就會(huì)把source設(shè)置為父實(shí)例   // Vue實(shí)例化的第一步就是規(guī)格化用戶傳入的數(shù)據(jù)，所以inject不管時(shí)數(shù)組還是對(duì)象   // 最后都會(huì)變成對(duì)象   while (source) {    if (source._provided && hasOwn(source._provided, provideKey)) {     result[key] = source._provided[provideKey]     break    }    source = source.$parent   }   // 處理默認(rèn)值的情況   if (!source) {    if ('default' in inject[key]) {     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 }}

export function initState (vm: Component) { vm._watchers = [] // 獲取到經(jīng)過初始化的用戶傳進(jìn)來的options 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) }}

function initProps (vm: Component, propsOptions: Object) { const propsData = vm.$options.propsData || {} const props = vm._props = {} // cache prop keys so that future props updates can iterate using Array // instead of dynamic object key enumeration. // 緩存props的key值 const keys = vm.$options._propKeys = [] const isRoot = !vm.$parent // root instance props should be converted // 如果不是跟組件則沒必要轉(zhuǎn)換成響應(yīng)式數(shù)據(jù) if (!isRoot) {  // 控制是否轉(zhuǎn)換成響應(yīng)式數(shù)據(jù)  toggleObserving(false) } for (const key in propsOptions) {  keys.push(key)  // 獲取props的值  const value = validateProp(key, propsOptions, propsData, vm)  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.  // 把props代理到Vue實(shí)例上來，可以直接通過this.props訪問  if (!(key in vm)) {   proxy(vm, `_props`, key)  } } toggleObserving(true)}

function initMethods (vm: Component, methods: Object) { const props = vm.$options.props for (const key in methods) {  if (process.env.NODE_ENV !== 'production') {   // 如果key不是一個(gè)函數(shù) 報(bào)錯(cuò)   if (typeof methods[key] !== 'function') {    warn(     `Method "${key}" has type "${typeof methods[key]}" in the component definition. ` +     `Did you reference the function correctly?`,     vm    )   }   // 如果props中存在同名的屬性 報(bào)錯(cuò)   if (props && hasOwn(props, key)) {    warn(     `Method "${key}" has already been defined as a prop.`,     vm    )   }   // isReserved判斷是否以$或_開頭   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的方法綁定到Vue實(shí)例上  vm[key] = typeof methods[key] !== 'function' ? noop : bind(methods[key], vm) }}

function initData (vm: Component) { let data = vm.$options.data data = vm._data = typeof data === 'function'  ? getData(data, vm)  : data || {} // isPlainObject監(jiān)測(cè)data是不是對(duì)象 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 const keys = Object.keys(data) const props = vm.$options.props const methods = vm.$options.methods let i = keys.length // 循環(huán)data while (i--) {  const key = keys[i]  if (process.env.NODE_ENV !== 'production') {   // 如果在methods中存在和key同名的屬性 則報(bào)錯(cuò)   if (methods && hasOwn(methods, key)) {    warn(     `Method "${key}" has already been defined as a data property.`,     vm    )   }  }  // 如果在props中存在和key同名的屬性 則報(bào)錯(cuò)  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)) {   // isReserved判斷是否以$或_開頭   // 代理data，使得可以直接通過this.key訪問this._data.key   proxy(vm, `_data`, key)  } } // observe data // 把data轉(zhuǎn)換為響應(yīng)式數(shù)據(jù) observe(data, true /* asRootData */)}

const computedWatcherOptions = { lazy: true }function initComputed (vm: Component, computed: Object) { // $flow-disable-line const watchers = vm._computedWatchers = Object.create(null) // computed properties are just getters during SSR // 判斷是不是服務(wù)端渲染 const isSSR = isServerRendering() for (const key in computed) {  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   )  }  // 如果不是ssr，則創(chuàng)建Watcher實(shí)例  if (!isSSR) {   // create internal watcher for the computed property.   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.  // 如果vm不存在key的同名屬性  if (!(key in 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)   }  } }}sharedPropertyDefinition = {  enumerable: true,  cnfigurable： true,  get: noop,  set: noop}export function defineComputed ( target: any, key: string, userDef: Object | Function) { // 如果是服務(wù)端渲染，則computed不會(huì)有緩存，因?yàn)閿?shù)據(jù)響應(yīng)式的過程在服務(wù)器是多余的 const shouldCache = !isServerRendering() // createComputedGetter返回計(jì)算屬性的getter // createGetterInvoker返回userDef的getter if (typeof userDef === 'function') {  sharedPropertyDefinition.get = shouldCache   ? createComputedGetter(key)   : createGetterInvoker(userDef)  sharedPropertyDefinition.set = noop } else {  // 當(dāng)userDef為一個(gè)對(duì)象時(shí)  sharedPropertyDefinition.get = userDef.get   ? shouldCache && userDef.cache !== false    ? createComputedGetter(key)    : createGetterInvoker(userDef.get)   : noop  sharedPropertyDefinition.set = userDef.set || noop } if (process.env.NODE_ENV !== 'production' &&   sharedPropertyDefinition.set === noop) {  sharedPropertyDefinition.set = function () {   warn(    `Computed property "${key}" was assigned to but it has no setter.`,    this   )  } } // 在tearget上定義一個(gè)屬性， 屬性名為key， 屬性描述符為sharedPropertyDefinition Object.defineProperty(target, key, sharedPropertyDefinition)}function createComputedGetter (key) { return function computedGetter () {  // 查找是否存在key的Watcher  const watcher = this._computedWatchers && this._computedWatchers[key]  if (watcher) {   // 如果dirty為true，則重新計(jì)算，否則返回緩存   if (watcher.dirty) {    watcher.evaluate()   }   if (Dep.target) {    watcher.depend()   }   return watcher.value  } }}function createGetterInvoker(fn) { return function computedGetter () {  return fn.call(this, this) }}

function initWatch (vm: Component, watch: Object) { for (const key in watch) {  const handler = watch[key]  // 處理數(shù)組類型  if (Array.isArray(handler)) {   for (let i = 0; i < handler.length; i++) {    createWatcher(vm, key, handler[i])   }  } else {   createWatcher(vm, key, handler)  } }}function createWatcher ( vm: Component, expOrFn: string | Function, handler: any, options?: Object) {  // isPlainObject檢查是否是對(duì)象 if (isPlainObject(handler)) {  options = handler  handler = handler.handler } if (typeof handler === 'string') {  handler = vm[handler] } // 最后調(diào)用$watch return vm.$watch(expOrFn, handler, options)}

export function initProvide (vm: Component) { const provide = vm.$options.provide if (provide) {  // 把provided存到_provided上  vm._provided = typeof provide === 'function'   ? provide.call(vm)   : provide }}