In Vue 2.x, the order for executing hooks is beforeCreate-> created -> Mounted ->… ->destroyed, but when parent and child components are nested, the parent and child components each have their own separate hook functions. How do these hooks merge and execute in what order?

Vue2. X Lifecycle execution sequence of parent and child components

Conclusion:

Follow the father before the son

Loading the rendering process

Parent beforeCreate-> Parent created-> Parent beforeMount-> child beforeCreate-> child created-> child beforeMount-> Child Mounted -> Parent Mounted replicates the codeCopy the code

The update process

Parent beforeUpdate-> Child beforeUpdate-> Child updated-> Parent updatedCopy the code

Destruction of the process

Parent beforeDestroy-> Child beforeDestroy-> Child destroyed-> Parent destroyedCopy the code

Simple version of common hooks

Parent create-> child created-> child mounted-> parent mountedCopy the code

Vue3 lifecycle hook functions are similar to Vue2 lifecycle hook functions. Vue 2.0 corresponds to Vue 3.0 as follows:

  • beforeCreate -> setup.
  • created -> setup.
  • beforeMount -> onBeforeMount.
  • mounted -> onMounted.
  • beforeUpdate -> onBeforeUpdate.
  • updated -> onUpdated.
  • beforeDestroy -> onBeforeUnmount.
  • destroyed -> onUnmounted.
  • errorCaptured -> onErrorCaptured.

Vue3 life cycle diagram

conclusion

In addition to beforecate and Created (which are replaced by the Setup method itself), the API lifecycle hooks we can access in the setup method have nine options:

  • OnBeforeMount — Called before the mount begins: The associated render function is called for the first time.
  • OnMounted – called when the component is mounted
  • OnBeforeUpdate – Called when data is updated, before the virtual DOM is patched. This is a good place to access the existing DOM before updating, such as manually removing event listeners that have been added.
  • OnUpdated – This hook is called after the virtual DOM is re-rendered and patched due to data changes.
  • OnBeforeUnmount – called before unmounting a component instance. At this stage, the instance is still perfectly normal.
  • OnUnmounted – called after the component instance is unmounted. When this hook is called, all directives of the component instance are unbound, all event listeners are removed, and all child component instances are unloaded.
  • OnActivated – called when activated by a component cached by keep-alive.
  • OnDeactivated – called when a component that is cached by keep-alive is disabled.
  • OnErrorCaptured – Called when an error is caught from a descendant component. The hook receives three parameters: the error object, the component instance where the error occurred, and a string containing information about the source of the error. This hook can return false to prevent further propagation of the error.

The Composition API does not have a beforeCreate and Created lifecycle.

Vue3 debug hooks

Vue3 gives us two hooks that can be used for debugging purposes.

  1. onRenderTracked
  2. onRenderTriggered

Both events have a Debugger event that tells you which action tracks the component and the target object and key for that action.

onRenderTracked

Called when tracking the virtual DOM is re-rendered. The hook receives a Debugger event as an argument. This event tells you which action tracks the component and the target object and key for that action.

<div id="app"> <button v-on:click="addToCart">Add to cart</button> <p>Cart({{ cart }})</p> </div> const app = Vue.createApp({ data() { return { cart: 0}}, renderTracked({key, target, type}) {console.log({key, target, type}) /* This is recorded when the component is first rendered: {key: "cart", target: { cart: 0 }, type: "get" } */ }, methods: { addToCart() { this.cart += 1 } } }) app.mount('#app')Copy the code

renderTracked

When the virtual DOM is rerendered to triggered.Similarly to renderTracked, receives a Debugger event as an argument. This event tells you what action triggered the rerender, as well as the target object and key for that action.

Usage:

<div id="app"> <button v-on:click="addToCart">Add to cart</button> <p>Cart({{ cart }})</p> </div> const app = Vue.createApp({ data() { return { cart: 0 } }, renderTriggered({ key, target, type }) { console.log({ key, target, type }) }, methods: {addToCart() {this.cart += 1 /* This will cause renderTriggered calls {key: "cart", target: {cart: 1}, type: "set" } */ } } }) app.mount('#app')Copy the code

Author: chenuvi

Email address: [email protected]

Reference content:

Vue3 official website tutorial

Parent component lifecycle execution sequence review in Vue

Vue 3 Lifecycle Complete Guide

Vue 3.0 enterprise project actual combat

This article is part of the “Gold Nuggets For Free!” Event, click to view details of the event