This article will help you understand the life cycle in Vue

Preface:

Each Vue instance goes through a series of initialization processes before being created. For example, you need to set up data monitoring, compile templates, mount instances to DOM, and update DOM when data changes. At the same time, some functions called lifecycle hooks are also run during this process, giving users the opportunity to add their own code in some specific scenarios.

The functions that ultimately execute the lifecycle in the source code all call the callHook method, which is defined in src/core/instance/lifecycle :

export function callHook (vm: Component, hook: string) {
 // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget()
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      try {
        handlers[i].call(vm)
      } catch (e) {
        handleError(e, vm, `${hook} hook`)
      }
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit('hook:' + hook)
  }
  popTarget()
}

The logic of callHook function is very simple. According to the string hook passed in, it gets the callback function array corresponding to vm.$options[hook] , and then traverses and executes it. When executing, vm is used as the context of function execution.

1. beforeCreate & created

Both beforeCreate and created functions are executed in the _init method when Vue is instantiated. It is defined in src/core/instance/init.js :

Vue.prototype._init = function (options?: Object) {
  // ...
  initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm)
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
  // ...
}

You can see that the hook calls of beforeCreate and created are before and after initState . The function of initState is to initialize props , data , methods , watch , computed and other properties. We will analyze them in detail later. Obviously, the beforeCreate hook function cannot obtain the values ​​defined in props and data , nor can it call the functions defined in methods .

When these two hook functions are executed, the DOM is not rendered, so we cannot access the DOM. Generally speaking, if the component needs to interact with the backend when loading, it can be executed in these two hook functions. If you need to access props , data and other data, you need to use the created hook function. Later when we introduce vue-router and vuex, we will find that they both mix the beforeCreatd hook function.

2. beforeMount & mounted

As the name implies, the beforeMount hook function occurs at mount , that is, before the DOM is mounted. It is called in the mountComponent function, which is defined in src/core/instance/lifecycle.js :

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // ...
  callHook(vm, 'beforeMount')
 
  let updateComponent
  /* istanbul ignore if */
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`
 
      mark(startTag)
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)
 
      mark(startTag)
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      vm._update(vm._render(), hydrating)
    }
  }
 
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (eg inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false
 
  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

Before executing the vm. render() function to render the VNode, the beforeMount hook function is executed vm. update() to VNode patch to the real DOM, the mouted hook is executed. Note that there is a judgment logic for the execution of the mouted hook function. If vm.$vnode is null, it means that this is not a component initialization process, but an initialization process through external new Vue . So for a component, when is it mounted ?

After the component's VNode patch to the DOM, the invokeInsertHook function will be executed, and the hook functions saved in insertedVnodeQueue will be executed one by one. It is defined in src/core/vdom/patch.js :

function invokeInsertHook (vnode, queue, initial) {
 // delay insert hooks for component root nodes, invoke them after the
  // element is really inserted
  if (isTrue(initial) && isDef(vnode.parent)) {
    vnode.parent.data.pendingInsert = queue
  } else {
    for (let i = 0; i < queue.length; ++i) {
      queue[i].data.hook.insert(queue[i])
    }
  }
}

This function will execute the insert hook function. For components, the insert hook function is defined in componentVNodeHooks in src/core/vdom/create-component.js :

const componentVNodeHooks = {
  // ...
  insert (vnode: MountedComponentVNode) {
    const { context, componentInstance } = vnode
    if (!componentInstance._isMounted) {
      componentInstance._isMounted = true
      callHook(componentInstance, 'mounted')
    }
    // ...
  },
}

We can see that each child component executes the mouted hook function in this hook function, and we have analyzed before that the order of adding insertedVnodeQueue is child first and then parent, so for synchronously rendered child components, the execution order of mounted hook function is also child first and then parent.

3. beforeUpdate & updated

As the name implies, the execution time of beforeUpdate and updated hook functions should be when the data is updated. So far, we have not analyzed Vue 's data two-way binding and update. I will introduce this process in detail in the next chapter.

The execution time of beforeUpdate is in the before function of rendering Watcher

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
 
  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (eg inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

Note that there is a judgment here, that is, this hook function will be called only after the component has been mounted .

The execution time of update is when the flushSchedulerQueue function is called, which is defined in src/core/observer/scheduler.js :

function flushSchedulerQueue () {
  // ...
  // Get the updatedQueue
  callUpdatedHooks(updatedQueue)
}
 
function callUpdatedHooks (queue) {
  let i = queue.length
  while (i--) {
    const watcher = queue[i]
    const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted) {
      callHook(vm, 'updated')
    }
  }
}

We will introduce the flushSchedulerQueue function in detail later, but you can have a general understanding first. updatedQueue is an array of updated wathcer . In the callUpdatedHooks function, it traverses these arrays. The updated hook function will only be executed if the current watcher is vm._watcher and the component has been mounted .

We mentioned before that during the component mount process, a rendering Watcher will be instantiated to listen to the data changes on the vm and re-render. This logic occurs when mountComponent function is executed:

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  // ...
  // This is shorthand let updateComponent = () => {
      vm._update(vm._render(), hydrating)
  }
  new Watcher(vm, updateComponent, noop, {
    before () {
      if (vm._isMounted) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  // ...
}

Then in the process of instantiating Watcher , isRenderWatcher will be judged in its constructor, and then the current watcher instance will be assigned to vm._watcher , which is defined in src/core/observer/watcher.js :

export default class Watcher {
  // ...
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // ...
  }
}

At the same time, the current wathcer instance is pushed to vm. watchers vm. watcher is specifically used to monitor data changes on vm and then re-render, so it is a rendering-related watcher . Therefore, in the callUpdatedHooks function, the updated hook function will be executed only after the callback of vm._watcher is executed.

4. beforeDestroy & destroyed

As the name implies ，beforeDestroy and destroyed hook functions is at the stage of component destruction. The component destruction process will be introduced in detail later, and the $ destroy method will be called in the end. It is defined in src/core/instance/lifecycle.js :

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 watchers
    if (vm._watcher) {
      vm._watcher.teardown()
    }
    let i = vm._watchers.length
    while (i--) {
      vm._watchers[i].teardown()
    }
    // remove reference from data object
    // 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
    }
  }

The beforeDestroy hook function is executed at the very beginning of the destroy function execution, and then performs a series of destruction actions, including deleting itself from parent 's children , deleting watcher , executing the destruction hook function of the currently rendered VNode , etc. After the execution is completed, the destroy hook function is called again.

During the execution of $destroy, it will execute vm. patch (vm._vnode, null) to trigger the destruction hook function of its child components, so the recursive call is layer by layer, so the execution order of destroy hook function is child first and then parent, which is the same as the mounted process.

5. activated & deactivated

The activated and deactivated hook functions are hooks specially customized for the keep-alive component. We will introduce them in detail when introducing keep-alive component. Let's leave it in suspense here.

Summarize:

This section mainly introduces the execution timing and order of each hook function in the Vue life cycle. Through analysis, we know that we can access data in the created hook function, access DOM in the mounted hook function, and do some timer destruction work in the destroy hook function. Understanding them will help us do different things in the appropriate life cycle.

This is the end of this article about understanding the life cycle in Vue. For more content related to the life cycle in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!