1.什么是生命周期和钩子

生命周期 : vue实例从创建到销毁的过程. (vue实例创建,dom树完成渲染)
钩子 : 回调函数即: 生命周期钩子就是vue实例从加载到销毁过程中回执行的一些回调函数

2.vue生命周期4个阶段8个钩子

vue第一次加载的时候会加载四个钩子

创建vue实例之前 : beforeCreate
创建vue实例之后 : created
挂载前 : beforeMount
挂载后(初始渲染) : mounted

<body>
  <div id="app">
    {{ msg }}
  </div>
  <script>
    const app = new Vue({
      //  挂载点
      el: '#app',
      // 要渲染的数据
      data: {
        msg: '万叶'
      },
    });
  </script>
</body>

</html>

2.1-beforeCreate

代码在执行new Vue()会声明Vue实例,在声明Vue实例的过程当中会执行第一个钩子(beforeCreate),创建Vue实例之前

      // 1.beforeCreate : 创建Vue实例之前
      beforeCreate() {
        // 这个钩子 : 在这个地方拿不到data的数据,data中的数据还没有创建
        console.log(this);
        console.log(this.msg)//undefined
      },

2.2-created

走完第一个钩子就会走第二个钩子(created)

      // 2.created : Vue创造实例完成
      created() {
        // 这个钩子 : 完成data的创建,但是还没有创建挂载点
        console.log(this);
        console.log(this.msg)//万叶
      },

2.3-beforeMount

接下来会自动判断你有没有挂载点,没有挂载点vue就出不来,如果有挂载点,他就会问你有没有模板(就是那个app的盒子),如果有模板就会开始挂载,没有他就会做一个判断,你什么时候挂载他什么时候走这个代码,然后把挂载点和页面的盒子进行绑定,然后执行第三个钩子

      // 3.beforeMount : data数据挂载到el之前
      beforeMount() {
        // 这个钩子 : 完成el的创建,但是没有挂载
        console.log(this);
        console.log(this.el)//app盒子
      },

2.4-mounted

走完第三个钩子就会开始创建虚拟的Dom页面开始渲染,执行第四个钩子

      // 4.mounted : 完成挂在(data数据已经渲染到el上)
      mounted() {
        // 这个钩子 : 完成初始渲染(第一次把data渲染到el上)
        console.log(this);
        console.log(this.el)//app盒子
      },

到这里vue第一次渲染就完成了

2.5-beforeUpdate

Vue有个数据驱动,数据驱动有个特点,挂载后,如果修改data的数据,页面的数据也会修改,DOM树就会重新渲染,when data changes 如果监听到data数据发生变化了,就会执行第五个钩子

      // 5.beforeUpdate : 数据更新前(检测数据变化了,但是页面还没有更新)
      beforeUpdate() {
        console.log(this);
      },

2.6-updated

走完上一个钩子就走这一个钩子,将data里面最新的数据更新在页面

      // 6.updated : 完成数据更新(把修改后的data重新渲染到了页面)
      updated() {
        console.log(this);
      },

2.7-beforeDestroy

使用vue实例.destroy()就会执行第七个和第八个钩子函数

      // 7.beforeDestroy : vue实例销毁前
      /* 
      销毁 : 不是指Vue实例销毁,而是解除data和el的绑定关系
          简单来说 : 以后data变化了和el没有关系
      销毁Vue : vue实例.destroy()
      */
      beforeDestroy() {
        console.log(this);
      },

2.8-destroyed

      // 8.destroyed : 已经销毁
      destroyed() {
        console.log(this);
      },

总结:

    阶段一 : 创建  (创建vue实例)
      beforeCreate    created
    阶段二 : 挂载  (data数据渲染到el)
      beforeMount    mounted
    阶段三 : 更新  (检测data变化并更新el)
      beforeUpdate    updated
    阶段四 : 销毁  (解除data与el的绑定关系)
      beforeDestroy    destroyed

3.vue常用钩子

  created : 完成data数据创建  (一般用于acios请求网络数据)
  mounted : 完成初始渲染  (一般用于操作dom)

Vue实例生命周期钩子