Vue生命周期详解

1.什么是生命周期

生命周期： Vue实例被创建出来到被销毁的整个过程称为生命周期（也被称为生命周期钩子）。

在Vue官网中有一张关于生命周期的图

类似于人的一生，在人的一生中有很多重要的时刻，Vue实例的整个生命周期中也有重要时刻，接下来我们谈下Vue的一生

2.Vue生命周期

2.1.主要的生命周期函数分类

挂载过程

• beforeCreate()：将要创建Vue实例，但Vue实例中的data属性和methods属性没有初始化好（类似人将要出生）
• create()：创建完毕Vue实例，其中的data属性和methods属性均被初始化好，但还没有挂载到页面中
• beforeMount()：将要挂载Vue实例，此时还没来得及往页面上放置，页面呈现的是未经Vue编译的DOM结构，在此阶段对DOM的操作，最终都不会奏效
• mounted()：挂载完毕，此时页面呈现的是经过Vue编译的DOM结构，对DOM的操作均有效，一般在此开启定时器、发送网络请求等初始化操作（类似人呱呱坠地）

更新过程

• beforeUpdate()：将要更新，此时data中的值是新的，页面上显示的数据是旧的，页面和数据没有保持一致，因为还没有重新渲染页面
• updated()：更新完毕，此时data中的值是新的，页面上显示的数据也是新的，页面和数据保持一致，页面已经被重新渲染

销毁流程

• beforeDestroy()：将要销毁，此时Vue实例中的data、methods、指令等等，仍处于可用状态，一般在这个阶段关闭定时器、解绑自定义事件等收尾操作（类似人驾鹤西游前留下的遗言）
• destroyed()：销毁完毕，移除所有的监视、所有的子组件、事件监听器。

2.2.对比人和Vue的“一生”

人的一生

将要出生
呱呱坠地 ===> 对应Vue生命钩子mouted
学会说话
学会走路
…
将要永别 ===> 对应Vue生命钩子beforeDestroy
已经永别

Vue的一生

将要创建 ===> 调用beforeCreate函数
创建完毕 ===> 调用created函数
将要挂载 ===> 调用beforeMount函数
挂载完毕 ===> 调用mouted函数【重要的钩子】
将要更新 ===> 调用beforeUpdate函数
更新完毕 ===> 调用updated函数
将要销毁 ===> 调用beforeDestroy函数【重要的钩子】
销毁完毕 ===> 调用destroyed函数

<template>
    <div id="root">
		<h1>{{n}}</h1>
		<button @click="add">点我使n值加一</button>
      	<button @click="stop">点我销毁Vue</button>
    </div>
</template>
<script>
    new Vue({
      el: "#root",
      data: {
        n: 1,
      },
      methods: {
        add() {
          this.n++;
        },
        stop(){
          this.$destroy();
        }
      },
      //需要注意的是,Vue中生命周期钩子不是写在methods属性中,是跟methods属性平级的
      beforeCreate() {
        console.log("beforeCreate")
        // console.log(this)//vm
      },
      created() {
        console.log("created")
      },
      beforeMount() {
        console.log("beforeMount")
      },
      mounted() {
        console.log("mounted");
      },
      beforeUpdate() {
        console.log("beforeUpdate");
      },
      updated() {
        console.log("updated");
      },
      beforeDestroy() {
        console.log("beforeDestroy");
      },
      destroyed() {
        console.log("destroyed");
      },
    });
  </script>

以上代码在控制台的输出为
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed