A brief introduction to vue life cycle hook functions (code example)

This article brings you a brief introduction (code example) about the vue life cycle hook function. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Let’s start with a picture

The following picture is the officially displayed life cycle diagram

The life cycle hook function of the Vue instance ( 8)
1. beforeCreate
I just created a new component and cannot access the data and the real dom. Basically, this seems to be unable to do anything.
2. created
The data attribute has been assigned a value, and it can The data is modified but updated will not be triggered. Here you can obtain the initial data
3. beforeMount
render is ready to render. The virtual dom in the function has been created. Changing the data at this time will not trigger update. , Here you can obtain the initial data
4. mounted
Start render, render the real DOM, execute the mounted hook function, the component has appeared in the page, and the data and events have been processed by the DOM. Here you can change to perform real DOM operations
5. beforeUpdate
component, a function that will be executed before the instance data is updated. The virtual DOM will rebuild the virtual DOM and re-render it after comparing it with the last virtual DOM. Remember not to modify data otherwise an infinite loop will occur
6. updated
Function that will be executed after updating. Remember not to modify data otherwise an infinite loop will occur
7. beforeDestroy
Before the instance is destroyed The function to be executed, to do the aftermath work, clear the timer, clear the non-instruction bound events, etc.
8. destroyed
The function that will be executed after the instance is destroyed can also do the aftermath work.

<template>
  <div class="hello">
   Hello World!
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  beforeCreate: function() {
    console.log("data属性光声明没有赋值的时候");
  },
  created: function() {
    console.log("data属性完成了赋值");
  },
  beforeMount: function() {
    console.log("页面上的{{name}}还没有被渲染成真正的数据");
  },
  mounted: function() {
    console.log("页面上的{{name}}被渲染成真正的数据");
  },
  beforeUpdate: function() {
    console.log(" 数据（data属性）更新之前会执行的函数");
  },
  updated: function() {
    console.log("数据（data属性）更新完会执行的函数");
  },
  beforeDestroy: function() {
    console.log("实例被销毁之前会执行的函数");
  },
  destroyed: function() {
    console.log("实例被销毁后会执行的函数");
  }
};
</script>
<style scoped>
</style>

Console has such an output sequence:

This is roughly the order in which life cycle hook functions are executed, including the fact that I used angular to develop the same as vue. Also has its own life cycle hook function.

The life cycle is simply a process from creation to initialization to destruction of a component. In this process, with these life cycle hook functions, we can operate the entire component more conveniently.

The above is the detailed content of A brief introduction to vue life cycle hook functions (code example). For more information, please follow other related articles on the PHP Chinese website!