lifecycleMixin() — vue Function Reference

Architecture documentation for the lifecycleMixin() function in lifecycle.ts from the vue codebase.

Function typescript CoreRuntime Instance calls 4

Entity Profile

CoreRuntime→ Instance→ lifecycleMixin() — vue Function Reference

Dependency Diagram

graph TD
  8c103bae_ceb4_9609_cad2_36c8a086376e["lifecycleMixin()"]
  f3560440_54c1_5663_36f8_c7de54d7310b["lifecycle.ts"]
  8c103bae_ceb4_9609_cad2_36c8a086376e -->|defined in| f3560440_54c1_5663_36f8_c7de54d7310b
  8ba8401b_e1ff_cc28_8f54_31d74258fd2d["setActiveInstance()"]
  8c103bae_ceb4_9609_cad2_36c8a086376e -->|calls| 8ba8401b_e1ff_cc28_8f54_31d74258fd2d
  4f1747ac_5aeb_b4ff_a868_1c9fed4bec76["update()"]
  8c103bae_ceb4_9609_cad2_36c8a086376e -->|calls| 4f1747ac_5aeb_b4ff_a868_1c9fed4bec76
  f8064a1e_1b6a_274a_f334_111faf594604["callHook()"]
  8c103bae_ceb4_9609_cad2_36c8a086376e -->|calls| f8064a1e_1b6a_274a_f334_111faf594604
  014300f3_ffbd_94d9_c1bd_535fbf7fa9ae["remove()"]
  8c103bae_ceb4_9609_cad2_36c8a086376e -->|calls| 014300f3_ffbd_94d9_c1bd_535fbf7fa9ae
  style 8c103bae_ceb4_9609_cad2_36c8a086376e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/core/instance/lifecycle.ts lines 62–145

export function lifecycleMixin(Vue: typeof Component) {
  Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
    const vm: Component = this
    const prevEl = vm.$el
    const prevVnode = vm._vnode
    const restoreActiveInstance = setActiveInstance(vm)
    vm._vnode = vnode
    // Vue.prototype.__patch__ is injected in entry points
    // based on the rendering backend used.
    if (!prevVnode) {
      // initial render
      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
    } else {
      // updates
      vm.$el = vm.__patch__(prevVnode, vnode)
    }
    restoreActiveInstance()
    // update __vue__ reference
    if (prevEl) {
      prevEl.__vue__ = null
    }
    if (vm.$el) {
      vm.$el.__vue__ = vm
    }
    // if parent is an HOC, update its $el as well
    let wrapper: Component | undefined = vm
    while (
      wrapper &&
      wrapper.$vnode &&
      wrapper.$parent &&
      wrapper.$vnode === wrapper.$parent._vnode
    ) {
      wrapper.$parent.$el = wrapper.$el
      wrapper = wrapper.$parent
    }
    // updated hook is called by the scheduler to ensure that children are
    // updated in a parent's updated hook.
  }

  Vue.prototype.$forceUpdate = function () {
    const vm: Component = this
    if (vm._watcher) {
      vm._watcher.update()
    }
  }

  Vue.prototype.$destroy = function () {
    const vm: Component = this
    if (vm._isBeingDestroyed) {
      return
    }
    callHook(vm, 'beforeDestroy')
    vm._isBeingDestroyed = true
    // remove self from parent
    const parent = vm.$parent
    if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
      remove(parent.$children, vm)
    }
    // teardown scope. this includes both the render watcher and other
    // watchers created
    vm._scope.stop()
    // remove reference from data ob
    // frozen object may not have observer.
    if (vm._data.__ob__) {
      vm._data.__ob__.vmCount--
    }
    // call the last hook...
    vm._isDestroyed = true
    // invoke destroy hooks on current rendered tree
    vm.__patch__(vm._vnode, null)
    // fire destroyed hook
    callHook(vm, 'destroyed')
    // turn off all instance listeners.
    vm.$off()
    // remove __vue__ reference
    if (vm.$el) {
      vm.$el.__vue__ = null
    }
    // release circular reference (#6759)
    if (vm.$vnode) {
      vm.$vnode.parent = null