Vue.js 技术教程：Vue.js 组件的生命周期详解

1. 引言

在 Vue.js 中，每个组件都有一个从创建到销毁的生命周期。Vue.js 提供了一系列的钩子函数，允许开发者在组件生命周期的不同阶段执行特定的代码。本文将详细介绍 Vue.js 组件的生命周期，并提供案例讲解。

2. 生命周期钩子函数

2.1 创建前后 (beforeCreate & created)

beforeCreate：实例初始化后，数据观测和事件配置前调用。此时，`data` 和 `methods` 都未被初始化。
created：实例已创建完成后调用。此时，已完成数据观测、属性和方法的运算，但尚未开始挂载 DOM，`$el` 属性目前不可见。

2.2 挂载前后 (beforeMount & mounted)

beforeMount：在挂载开始之前被调用：相关的 `render` 函数首次被调用。
mounted：实例挂载完成后调用，此时组件已经挂载到 DOM 上，可以进行 DOM 操作。

2.3 更新前后 (beforeUpdate & updated)

beforeUpdate：在数据更新之前调用，发生在虚拟 DOM 打补丁之前。可以在这个钩子中进行一些更新前的准备工作。
updated：在由于数据变化导致的虚拟 DOM 重新渲染和打补丁后调用。在这个钩子中可以操作更新后的 DOM。

2.4 销毁前后 (beforeDestroy & destroyed)

beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed：在实例销毁之后调用。此时，Vue 实例所有指令的绑定、监听器的移除以及子实例的销毁都已完成。

3. 案例讲解

3.1 示例代码

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="updateMessage">更新消息</button>
    <button @click="destroyComponent">销毁组件</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Message Updated!';
    },
    destroyComponent() {
      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>

3.2 运行结果

在页面加载时，会依次在控制台看到 “beforeCreate” -> “created” -> “beforeMount” -> “mounted” 的输出；点击 “更新消息” 按钮后，会看到 “beforeUpdate” -> “updated” 的输出；点击 “销毁组件” 按钮后，会看到 “beforeDestroy” -> “destroyed” 的输出。