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>