Introduction to vue life cycle hook hook functions (with examples)

This article brings you an introduction to the hook function of the vue life cycle (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Life cycle hook functions of Vue instances (8)

1. beforeCreate

I just created a new component and cannot access the data and real DOM. Basically, this seems to be useless

2. created

The data attribute has been assigned a value. The data can be modified but updated will not be triggered. Here you can obtain the initial data

3. beforeMount

Render is ready to be rendered. 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, and execute the mounted hook function. The component has appeared on 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 the last virtual DOM Re-render after comparison. Remember not to modify the data otherwise an infinite loop will occur

6、updated

Functions that will be executed after updating. Remember not to modify the data otherwise an infinite loop will occur

7、 beforeDestroy

　 Function that will be executed before the instance is destroyed, do the aftermath work, clear the timer, clear non-instruction bound events, etc.

8、destroyed

　 Example The function that will be executed after being destroyed can also do the aftermath work.

<template>
  <div>
   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>
</style>
console这样一个输出顺序：

This is roughly the order in which life cycle hook functions are executed, including the fact that I used angular to develop like vue. It 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 Introduction to vue life cycle hook hook functions (with examples). For more information, please follow other related articles on the PHP Chinese website!