Vue 生命周期又名生命周期回调函数、生命周期函数、生命周期钩子，是 Vue在关键时刻帮我们调用的一些特殊名称的函数。所有生命周期函数中的 this 都是指向 vm 或 vue 组件实例对象。

---

生命周期示例图

生命周期示例代码：

<template>
  <div id="app">
    <h2>vue生命周期</h2>
    <h3>当前的n值是：{{ n }}</h3>
    <button @click="add">点我n+1</button>
    <button @click="bye">点我销毁vm</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        n: 1,
      };
    },
    methods: {
      add() {
        console.log("add");
        this.n++;
      },
      bye() {
        console.log("bye");
        this.$destroy();
      },
    },
    //组件创建之前调用
    beforeCreate() {
      console.log("beforeCreate");
    },
    //组件创建之后调用
    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>
<style scoped>
  #app {
    margin-left: 50px;
    width: 100%;
    height: 100%;
  }
  #app button:not(:last-child) {
    margin-right: 10px;
  }
</style>

以下是在各个生命周期函数中加入 debugger 断点后的演示：

1、beforeCreate

组件创建之前调用

图示：

总结：

• 当我们把 debugger 断点设置在 beforeCreate 中，可以看到图中打印了 beforeCreate 和 Vue 组件实例对象，当我们打开 VueComponent 就会发现 数据代理 _data 和 methods 回调函数还未创建。

2、created

组件创建之后调用

图示：

总结：

• 当我们把 debugger 断点设置在 created 中，可以看到图中 Vue 组件实例对象中数据代理 _data 和 methods 回调函数已经创建。

3、beforeMount

在组件被挂载之前调用

图示：

总结：

• 在 beforeMount 中，你可以访问组件的属性（如data、methods等），但不能访问 $el 或 $refs ，因为此时组件尚未挂载到DOM中。

4、mounted

在组件挂载之后调用

图示：

总结：

• 当断点设置在 mounted 中，所有虚拟 DOM 已经被渲染为真是 DOM 并插入到指定 DOM 元素中，这时候可以使用 this.$el 访问组件的根元素，并进行DOM操作，也可以发起异步请求。

注意

即使组件被挂载，其子组件可能还没有被挂载。如果你需要等待所有子组件都挂载完成，可以使用以下代码进行操作

<script>
……
mounted() {
  this.$nextTick(() => {
    // 在这里，所有子组件也都已挂载完成
    console.log('所有子组件都已挂载');
  });
}
</script>

5、beforeUpdate

组件更新之前调用

图示：

总结：

• 当断点设置在 beforeUpdate 中，并点击 "点我 n+1 按钮" ,会发现 VueComponent 中的数据已更新，但页面还未渲染。

6、updated

组件更新之后调用

图示：

总结：

• 可以看到上图中的页面和数据已经同步。

7、beforeDestroy

组件被销毁之前调用

图示：

总结：

• 在这个阶段，组件实例仍然有效，但即将被销毁，你可以在这里执行清理工作，例如：
  • 取消定时器：如果你在组件中设置了定时器（如 setInterval 或 setTimeout ），应该在这个阶段清除它们，以避免内存泄漏。
  • 解除监听器：如果你使用了 watch 或 $on 添加了事件监听器，记得在组件销毁前移除它们。
  • 关闭连接：如果你的组件与服务器或其他资源建立了连接，可以在这个阶段关闭它们。
  • 清理其他资源：释放组件可能占用的任何其他资源，如Web Workers、WebSocket连接等。

8、destroyed

组件被销毁之后调用

图示：

总结： destroyed 是 Vue 组件生命周期中的最后一个钩子，它在组件实例被销毁后调用。这意味着组件实例和它的所有子组件已经被完全移除，不再存在，这时候点击按钮是没有任何效果的。