vue生命周期钩子函数

---

前言

    vue所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着 你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同， this.fetchTodos 的行为未定义

一、vue的生命周期是什么

    vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
官网生命周期图示

二、vue生命周期钩子执行顺序

<div id="app">
        <h1>{{message}}</h1>
</div>
<script>
  const app = new Vue({
            el: "#app",
            data: {
                message: "hello world"
            },
</script>

beforeCeate

      beforeCreate() {
                console.log("beforeCreate");
                console.log(this.message); //undefined
                console.log(this.$el);
                console.log("-------------分割线-------------");

            },

Vue的实例对象已经创建完毕 只是传入的参数（data数据 methods方法 el 都没有设置到Vue的实例上面去）所以这里取不到data里面的数据

created

 created() {
                console.log("created");
                console.log(this.message); 
                console.log(this.$el);
                console.log("-------------分割线-------------");
            },

Vue实例对象创建完毕 并且所有的属性 都已经设置到实例化对象上了（通常情况下可以做数据的初始化）

beforeMount

  beforeMount() {
                console.log("beforeMount");
                console.log(this.message);
                console.log(this.$el);
                console.log("-------------分割线-------------");
            },

页面所有组件创建完毕，但是还没有进行对应的VUE操作(data里面数据的解析 methods里面的方法 )仅限于拿到页面结构（数据还没有解析）

mounted

 mounted() {
                console.log("mounted");
                console.log(this.message); //undefined
                console.log(this.$el);
                console.log("-------------分割线-------------");
            }

页面所有组件创建完毕 并且会执行对应的vue操作 把页面(数据解析完毕)的结构挂到vue的实例上面

beforeUpdate

  beforeUpdate() {
          console.log("组件更新之前");
        },

组件更新之前执行的钩子函数

updated

 updated() {
          console.log("组件更新完成");
        },

组件更新完成执行的钩子函数

beforeDestroy

  beforeDestroy() {
          console.log("组件销毁之前");
        },

组件销毁之前执行的钩子函数

destroyed

 destroyed() {
      console.log("组件销毁完成");
    },

组件销毁完成执行的钩子函数

---