Lifecycle hook functions (lifecycle functions for short) refer to the functions triggered by the creation, update, and destruction phases of a component. According to the hook function triggered by each phase, we can do some operations accordingly, such as fetching back-end interface data, listening to events, executing events, executing timers, removing events, cleaning timers, and so on.

According to the above three stages, the life cycle is summarized as follows:

  • Instantiation phase

    Components to create

  • pol

    Component updates

  • Destruction of period

    Component destroyed

Life cycle functions will be explained separately in terms of these three cycles.

To facilitate understanding, I have written examples on jsrun.net. (a similar to jsfiddle website, domestic Jsfiddle wall)

Life cycle diagram

The life cycle functions are for the browser side, the server side currently only supports beforeCreate and created two life cycle functions.

Render and renderError are not classified as lifecycle hook functions.

Where Has “el” option is compared as follows:

el

// If there is an EL attribute
new Vue({
  el: "#app".beforeCreate: function() {
    console.log("Called beforeCreate");
  },
  created: function() {
    console.log("Call created");
  },
  beforeMount: function() {
    console.log("Called beforeMount");
  },
  mounted: function() {
    console.log("Mounted"); }});// Output the result
// Call beforeCreate
// created is called
BeforeMount is called
// Mounted is invoked
Copy the code

No el

// If there is an EL attribute
const vm new Vue({
  beforeCreate: function() {
    console.log("Called beforeCreate");
  },
  created: function() {
    console.log("Call created");
  },
  beforeMount: function() {
    console.log("Called beforeMount");
  },
  mounted: function() {
    console.log("Mounted"); }});// Output the result
// Call beforeCreate
// created is called
Copy the code

$vm.$mount(‘#app’). The effect is the same, essentially the same, just more flexible.

Instantiation phase

The instantiation phase involves the following lifecycle functions (executed from top to bottom) :

  • beforeCreate
  • created
  • beforeMount
  • mouted

BeforeCreate and Created will trigger the render function, if there is a template will be converted to render function. (Of course, if the component defines the render function, then the render function takes precedence.)

See jsrun.net/LZyKp/edit for a detailed example

// See the Console command line tool in the lower right corner for output
new Vue({
  el: '#dynamic-component-demo'.data: {
    num: 2,
  },
  beforeCreate(){
    console.log("beforeCreate".this.num,this.a);
    // Output befoerCreate,,
    // this. Num data is not monitored yet, this. A method is not bound
  },
  created(){
    console.log("created".this.num,this.a,this.$el);
    Created, 2, function () {[native code]}
  },
  beforeMount(){
    console.log(this.$el.innerText);
    // output {{num}}, the original DOM content
  },
  mounted(){
    console.log(this.$el.innerText);
    // Output 2, which is already vue rendered DOM content
  },
  methods: {
    a(){}
  }
})
Copy the code

beforeCreate

After instance initialization, data Observer and Event/Watcher events are called before configuration.

created

Called immediately after the instance is created. In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks. However, the mount phase has not yet started and the $EL attribute is not currently visible.

beforeMount

Called before the mount begins: The associated render function is called for the first time. The $el attribute is visible, but it is still the original DOM, not newly created.

mounted

El is replaced by the newly created vm.$el, which is called after being mounted to the instance. If root mounts a document element, vm.$el is also in the document when Mounted is called.

Note that Mounted does not promise that all child components will also be mounted together. / / add vm.$nextTick instead of Mounted if you want to wait until the entire view is rendered:

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered})}Copy the code

pol

The lifetime refers to the following lifecycle functions:

  • beforeUpdate
  • updated

Vue needs to change the data to trigger component re-rendering and trigger the lifetime hook function above. BeforeUpdate and updated trigger the render function.

See jsrun.net/8ZyKp/edit for an example.

// You need to click the update button
// If you do not click the update button for 2 seconds, the output will be "no update in 2 seconds".
// See the Console command line tool in the lower right corner for output
new Vue({
  el: '#dynamic-component-demo'.data: {
    num: 2,
  },
  beforeUpdate(){
    clearTimeout(this.clearTimeout);
    this.clearTimeout = setTimeout(function(){
      console.log("Not updated in 2 seconds.");
    },2000);
    console.log("beforeUpdate".this.num,this.$el.innerText);
    // First click update, output beforeUpdate,3, click Update 2
  },
  updated(){
    console.log("updated".this.num,this.$el.innerText);
    // For the first time, the output is updated,3, and click Update 3
  },
  methods: {
    updateComponent(){
      this.num++; }}})Copy the code

beforeUpdate

When data is updated, the virtual DOM is called before it changes. This is a good place to access the existing DOM before the update, such as manually removing event listeners that have been added.

Do not change state in this function, or an infinite loop will be triggered.

updated

Called after data updates and virtual DOM changes.

When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations. In most cases, however, you should avoid changing status in the meantime. If you want to change state accordingly, it is usually best to use computed properties or Watcher instead.

Like Mounted, updated does not promise that all child components will also be redrawn together. $nextTick replaces updated with vm.$nextTick if you want to wait until the entire view is redrawn:

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered})}Copy the code

Do not change state in this function, or an infinite loop will be triggered.

Destruction of period

The destruction period involves the following lifecycle functions:

  • beforeDestroy
  • destroyed

See jsrun.net/QZyKp/edit for an example.

// Switch TAB and see the console output in the lower right corner
Vue.component('tab-home', { 
	template: '<div>Home component</div>',
  beforeDestroy(){
    console.log("tab-home"."beforeDestroy");
  },
  destroyed(){
    console.log("tab-home"."destroyed");
  },
})
Vue.component('tab-posts', { 
	template: '<div>Posts component</div>',
  beforeDestroy(){
    console.log("tab-posts"."beforeDestroy");
  },
  destroyed(){
    console.log("tab-posts"."destroyed");
  },
})
Vue.component('tab-archive', { 
	template: '<div>Archive component</div>',
  beforeDestroy(){
    console.log("tab-archive"."beforeDestroy");
  },
  destroyed(){
    console.log("tab-archive"."destroyed"); }})new Vue({
  el: '#dynamic-component-demo'.data: {
    currentTab: 'Home'.tabs: ['Home'.'Posts'.'Archive']},computed: {
    currentTabComponent: function () {
      return 'tab-' + this.currentTab.toLowerCase()
    }
  }
})
Copy the code

beforeDestroy

Called before instance destruction, at which point the instance is still fully available. This is where event listeners, timers, and so on are removed to avoid memory leaks

destroyed

Called after the Vue instance is destroyed. When called, everything indicated by the Vue instance is unbound, all event listeners are removed, and all subinstances are destroyed.

So if you need something that uses the binding indicated by the Vue instance, you need to use it in beforeDestroy. What the destroyed function does also does in beforeDestroy, so there is no need to do in the destroyed function.

Other life cycle functions that are not commonly used

  • activated

    Called when the component is active, see Building component-keep-alive

  • deactivated

    Called when a component is disabled, see Building component-keep-alive

  • errorCaptured

    This life hook is called when an error is caught from a descendant component. It was added in 2.5.0.

Use attention

Do not use the ES6 arrow function for life cycle functions, otherwise this pointing will be problematic.

Take a look at this example jsrun.net/cZyKp/edit.

// See the Console command line tool in the lower right corner for output
new Vue({
  el: '#dynamic-component-demo'.data: {
    num: 2,},created: (a)= >{
    console.log("created".this);
    // Output is created,[object Window]
    // This refers not to the Vue instance but to the parent this}})Copy the code

Divergent thinking

Since each component has a life cycle, what is the difference in the execution order between parent and sibling components?

You first need to know when the template is converted to the virtual DOM, when the virtual DOM is built, and when it is mounted to the real DOM.

Here we don’t go into the vue principle in depth, but have a general understanding of the process from Template to virtual DOM:

Template -> AST tree -> render function

We’re actually focusing on the Render function, so you can see that run-time – compiler -vs- only includes run-time. The virtual DOM is formed in the Render function. If you’ve ever used JSX, it’s easy to think of JSX as a virtual DOM. Of course the Render function also performs the logic of mounting to the real DOM.

The mounted function of all components must output logs in the same way. The updated DOM mount function of all components must output logs in the same way.

Parent component lifecycle function execution order

The Render function is the dividing line of the parent component lifecycle function.

The order of the render functions is as follows.

BeforeMount -> render -> Mounted

BeforeUpdate -> render -> updated

For details, see the online example at jsrun.net/vhyKp/edit.

Sibling component lifecycle execution order

For details, see the online example at jsrun.net/NhyKp/edit.

Refer to the article

  • Instance lifecycle hooks
  • How can you explain the vUE lifecycle to the satisfaction of the interviewer?
  • Vue life cycle details
  • The Vue life cycle goes deep
  • Runtime – compiler -vs- contains only runtime