Read vue2.6.14 core source code (4):_ init

Perusal Vue2.6.14 Core Source code (4): _init

    /**
        @date 2021-08-22
        @description  Perusal Vue2.6.14 Core  Source code (4): _init
    */
 Copy code 

one （ order ）

The last chapter is over initGlobalAPI, This chapter goes to the real implementation _init Where the function is ,_init In addition to the new Vue Will be executed , When building components , Each component also calls ,_init The internal specific process is Chapter two ：After Vue Medium initMixin I told you , Here is a detailed analysis _init Internal execution .

The first is the statement Vue Constructors , And then called a few mixin function , Now read a few carefully mixin function

Ii. （initLifecycle）

export function initLifecycle (vm: Component) {
  const options = vm.$options

  //  Find the first one is not  abstract  Of  parent, Fill this  parent  Of  $children
  let parent = options.parent
  if (parent && !options.abstract) {
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }
  //  Declaration of some variables 
  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
}
 Copy code 

3 （initEvents）

Initialize event listening

// initEvents:
export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  //  initialization  parent  Events 
  //  Note that here is the acquisition of  _parentListeners, But it is not  parent  Upper , It's on itself 
  //  Like components  <HelloWorld msg="Welcome to Your Vue.js App" @handleClick="test" /> 
  //  Here  listeners  Namely  [handleClick]
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

// updateComponentListeners: 
export function updateComponentListeners(
  vm: Component,
  listeners: Object,
  oldListeners: ?Object
) {
  target = vm
  updateListeners(listeners, oldListeners || {}, add, remove, createOnceHandler, vm)
  target = undefined
}

// updateListeners:
export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, def, cur, old, event
  //  Traverse  on(listeners)
  for (name in on) {
    def = cur = on[name]
    old = oldOn[name]
    //  Standardization  event
    event = normalizeEvent(name)
    /* istanbul ignore if */
    if (__WEEX__ && isPlainObject(def)) {
      cur = def.handler
      event.params = def.params
    }
    if (isUndef(cur)) {
      //  The current event is  undefined  or  null, Warning 
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (isUndef(old)) {
      
      if (isUndef(cur.fns)) {
        // old  yes  undefined  or  null  And  cur.fns  It's also  undefined  or  null, to  on[name]  assignment 
        cur = on[name] = createFnInvoker(cur, vm)
      }
      //  Call it once （once）, to update  on[name]  Is used after the call  $off  remove 
      if (isTrue(event.once)) {
        cur = on[name] = createOnceHandler(event.name, cur, event.capture)
      }
      //  call  $on  Handle this event 
      add(event.name, cur, event.capture, event.passive, event.params)
    } else if (cur !== old) {
      //  Current events and  old  The event is not the same event , Update 
      old.fns = cur
      on[name] = old
    }
  }
  //  remove（ call  $off)  Nonexistent Events 
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}


 Copy code 

boss （initRender）

export function initRender (vm: Component) {
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees
  const options = vm.$options
  // _parentVnode  It's the self  vnode
  const parentVnode = vm.$vnode = options._parentVnode // the placeholder node in parent tree
  const renderContext = parentVnode && parentVnode.context
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject
  vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
  vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

  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 {
    //  Set up  $attrs, $listeners  For responsive data 
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

 Copy code 

wu （callHook）

export function callHook (vm: Component, hook: string) {
  //  Disable... When calling lifecycle hook  dep  collect 
  //  By way of  Dep.target  Set to  undefined  Realization 
  pushTarget()
  //  Get hook function 
  const handlers = vm.$options[hook]
  const info = `${hook} hook`
  if (handlers) {
    //  Call hook function 
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info)
    }
  }
  //  When the component is used, you can pass in  @hook:[hookEvent]="method"  Can also call  hook  such as  <HelloWorld @hook:beforeCreate="beforeCreateTest" />
  //  stay  vm.$on  Events monitored in , Through here  vm.$emit  call 
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  //  Cancel 
  popTarget()
}
 Copy code 

lu （others）

Others are declarative properties , stay After Vue Can be seen in .

end （ Navigation ）

Perusal Vue2.6.14 Core Source code (1): entrance

Perusal Vue2.6.14 Core Source code (2): After Vue

Perusal Vue2.6.14 Core Source code (3): initGlobalAPI

Perusal Vue2.6.14 Core Source code (4): _init