vue 原始碼詳解（二）： 元件生命週期初始化、事件系統初始化

ifIhaveWings發表於2021-08-12
Vue原始碼元件事件

vue 原始碼詳解（二）： 元件生命週期初始化、事件系統初始化

上一篇文章 生成 Vue 例項前的準備工作 講解了例項化前的準備工作， 接下來我們繼續看， 我們呼叫 new Vue() 的時候， 其內部做了哪些工作。

1. 從 Vue 建構函式開始

new Vue(options) 時， Vue 建構函式中只有一句程式碼 this._init(options) 。 通過執行這個函式順次呼叫了下邊程式碼中註釋處 1 ~ 10 的程式碼， 下面就按照程式碼的執行順序，依次解釋下每個函式的作用。

let uid = 0

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++ // 1

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm) // 2
    initEvents(vm) // 3
    initRender(vm) // 4
    callHook(vm, 'beforeCreate') // 5
    initInjections(vm) // 6 resolve injections before data/props 
    initState(vm) // 7
    initProvide(vm) // 8 resolve provide after data/props
    callHook(vm, 'created') // 9

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el) // 10
    }
  }
}

1.1.1 初始化宣告週期

  1. 註釋很明瞭， locate first non-abstract parent, 即找到當前元件的第一個非抽象的父元件， 作為當前元件的父元件，並將當前元件記錄到父元件的 $children 列表中。元件建立父子元件關係時，抽象元件（如 keep-alive）是被忽略的。

  2. 對當前元件的一些屬性進行初始化， $parent 標記當前元件的父元件。 $root 標記當前元件的根元件， 若存在父元件， 則當前元件的根元件為父元件的根元件；若不存在父元件， 則當前元件的根元件是當前元件自身。然後初始化當前元件的子元件列表、引用列表 ($children / $refs) 分別為空。然後初始化了觀察者列表 _watcher 為 null. 最後初始化了 _isMounted _isDestroyed _isBeingDestroyed 分別為 false, 依次表示 為掛載到 DOM 、 元件未銷燬、 元件當前非正在銷燬狀態

vue/src/core/instance/lifecycle.js : initLifecycle

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

  // 1 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)
  }

  // 2. 對當前元件的一些屬性進行初始化
  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
}

1.1.2 初始化事件

  1. vm._events 初始化了當前元件 vm 的事件儲存物件， 預設是一個沒有任何屬性的空物件；
  2. 收集父元件上監聽的事件物件，也就是監聽器， 如果父元件上有監聽器， 則和當前元件的監聽器進行一系列對比，並更新。 具體邏輯詳見下面 updateListeners的註釋.

vue/src/core/instance/events.js :

這段程式碼中的 add remove 函式即我們上次提到的 eventMixin 中給 Vue 物件初始化的事件系統。

export function initEvents (vm: Component) {
  vm._events = Object.create(null) // 1 事件儲存物件
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners
  if (listeners) { // 2 如果父元件上有監聽器， 則和當前元件的監聽器進行一系列對比，並更新
    updateComponentListeners(vm, listeners) 
  }
}

let target: any

function add (event, fn) {
  target.$on(event, fn)
}

function remove (event, fn) {
  target.$off(event, fn)
}

function createOnceHandler (event, fn) {
  const _target = target
  return function onceHandler () {
    const res = fn.apply(null, arguments)
    if (res !== null) {
      _target.$off(event, onceHandler)
    }
  }
}

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

vue/src/core/vdom/helpers/update-listeners.js


// 這個函式用來解析一個事件資訊， 返回事件的名稱、和是否被 once / capture / passive 修飾符修飾過
const normalizeEvent = cached((name: string): {
  name: string,
  once: boolean,
  capture: boolean,
  passive: boolean,
  handler?: Function,
  params?: Array<any>
} => {
  const passive = name.charAt(0) === '&'
  name = passive ? name.slice(1) : name
  const once = name.charAt(0) === '~' // Prefixed last, checked first
  name = once ? name.slice(1) : name
  const capture = name.charAt(0) === '!'
  name = capture ? name.slice(1) : name
  return {
    name,
    once,
    capture,
    passive
  }
})

export function createFnInvoker (fns: Function | Array<Function>, vm: ?Component): Function {
  function invoker () {
    const fns = invoker.fns
    if (Array.isArray(fns)) {
      const cloned = fns.slice()
      for (let i = 0; i < cloned.length; i++) {
        invokeWithErrorHandling(cloned[i], null, arguments, vm, `v-on handler`)
      }
    } else {
      // return handler return value for single handlers
      return invokeWithErrorHandling(fns, null, arguments, vm, `v-on handler`)
    }
  }
  invoker.fns = fns
  return invoker
}


export function updateListeners (
  on: Object, // 父元件的事件監聽物件
  oldOn: Object, // 如果不是初次渲染， 原先的 vm 例項上可能存在一些原有的事件
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, def, cur, old, event
  for (name in on) { // 遍歷父元件的事件物件
    def = cur = on[name] // 父元件中的事件
    old = oldOn[name] // 當前元件中已存在的同名事件
    event = normalizeEvent(name)  // 解析當前事件， 獲取詳細資訊， 見 `normalizeEvent` 函式的註釋
    /* istanbul ignore if */
    if (__WEEX__ && isPlainObject(def)) {
      cur = def.handler
      event.params = def.params
    }
    if (isUndef(cur)) { // 父元件事件不存在， 直接報警告
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    } else if (isUndef(old)) { // 父元件事件存在， 並且當前元件不存在該事件的同名事件
      if (isUndef(cur.fns)) { // 如果當前事件的事件處理函式不存在， 報錯
        cur = on[name] = createFnInvoker(cur, vm)
      }
      if (isTrue(event.once)) { // 如果是 once 修飾符修飾過的事件
        cur = on[name] = createOnceHandler(event.name, cur, event.capture) // 為當前元件繫結 once 型別事件
      }
      add(event.name, cur, event.capture, event.passive, event.params) // 將事件存入當前元件事件物件
    } else if (cur !== old) { 
      // 父元件存在該事件，子元件存在同名事件， 並且父子元件對於同一個事件的處理函式不相同
      // 則採用從父元件傳遞過來的處理函式
      old.fns = cur 
      on[name] = old
    }
  }
  // 刪除 vm 上之前存在、現在不存在的事件
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

vue\src\shared\util.js

isUndef isDef 這兩個函式，就不解釋了，知道是幹啥的就可以了。

export function isUndef (v: any): boolean %checks {
  return v === undefined || v === null
}

export function isDef (v: any): boolean %checks {
  return v !== undefined && v !== null
}

1.1.3 渲染初始化與資料監聽

終於來到大名鼎鼎的響應式資料處理了。

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
  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
  // 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
  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.
  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
  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)
  }
}

相關文章