vue的生命函数周期以及钩子函数的详解

首先我们先附上官网的图

图中展现出的是vue整个生命周期以及钩子函数

1-　　beforeCreate(创建前)

2-　　created(创建完成)

3-　　beforeMount(挂载前)

4-　　mounted(挂载完成)

5-　　beforeUpdate(更新前)

6-　　updated(更新完成)

7-　　beforeDestroy(销毁前)

8-　　destroyed(销毁完成)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id='app'>
    <button @click="btnclick">点击更新</button>
    <h1>{{message}}我是outerHTML</h1>
  </div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: '#app',
      //template:"<h2>{{message}}--我位于template里</h2>", // vue实例内部
      // render:function(creatElement){
      //   return creatElement("h2","this is renter函数内部")
      // },
      data: {
        message:"hello vue!"
      },
      beforeCreate:function(){
        console.log("beforeCreate(创建前):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message); 
      },
      created: function () {
        console.log("created(创建完成):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      beforeMount: function () {
        console.log("beforeMounted(挂载前):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      mounted: function () {
        console.log("mounted(挂载完成):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      beforeUpdate: function () {
        console.log("beforeUpdate(更新前):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      updated: function () {
        console.log("updated(更新后):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      beforeDestroy: function () {
        console.log("beforeDestroy(销毁前):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      destroyed: function () {
        console.log("destroyed(销毁后):");
        console.log(this.$el);
        console.log(this.$data);
        console.log(this.message);
      },
      methods:{
        btnclick:function(){
          this.message = "hello world!";
        }
      }

    })
  </script>
</body>

</html>

　　源代码如上,运行结果,之后点击更新按钮,控制台截图