lifecycleMixin() — vue Function Reference

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

Function typescript VueCore Instance calls 4

Entity Profile

VueCore→ Instance→ lifecycleMixin() — vue Function Reference

Dependency Diagram

graph TD
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca["lifecycleMixin()"]
  d937f76e_061f_a631_9587_336503c9a15c["lifecycle.ts"]
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca -->|defined in| d937f76e_061f_a631_9587_336503c9a15c
  087a2dd7_629a_229e_decb_eb877cce9395["setActiveInstance()"]
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca -->|calls| 087a2dd7_629a_229e_decb_eb877cce9395
  82001dd5_db37_dcc4_2a46_4033717cc6a2["update()"]
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca -->|calls| 82001dd5_db37_dcc4_2a46_4033717cc6a2
  77ac8989_609a_4755_79eb_0403c1cc7788["callHook()"]
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca -->|calls| 77ac8989_609a_4755_79eb_0403c1cc7788
  f707af4b_02cd_3582_777e_13a1ca907b1f["remove()"]
  5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca -->|calls| f707af4b_02cd_3582_777e_13a1ca907b1f
  style 5ebc50a8_91d4_fca0_61db_b1eb7c6dc6ca 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