Vue 生命周期

Vue 的生命周期是指 Vue 实例从创建到销毁的过程中所经历的一系列阶段。每个阶段都有对应的钩子函数（hook functions），开发者可以在这些钩子中执行特定的操作。

Vue 2 和 Vue 3 的生命周期钩子基本一致，但在某些细节上有所不同（如 `beforeDestroy` 在 Vue 3 中改为 `beforeUnmount`）。下面是 Vue 2 和 Vue 3 中的生命周期钩子及其说明：

---

## 🧭 Vue 生命周期钩子（Vue 2 & Vue 3）

| 钩子函数 | 触发时机 | 说明 |
|----------|----------|------|
| **`beforeCreate`** | 实例刚被创建，数据观测 (data observer) 和事件/生命周期钩子还未初始化 | 可以在这里做一些初始化操作，但此时不能访问 data、methods 等 |
| **`created`** | 实例已完成数据观测，属性和方法已绑定，但 DOM 还未渲染 | 常用于初始化数据、调用 API 等 |
| **`beforeMount`** | 模板编译/挂载之前 | 此时模板已经编译完成，但还未挂载到 DOM |
| **`mounted`** | 模板已挂载到 DOM 上 | 常用于操作 DOM、发起请求等 |
| **`beforeUpdate`** | 数据更新时，发生在虚拟 DOM 重新渲染和打补丁之前 | 此时可以获取更新前的状态 |
| **`updated`** | 数据更新后，DOM 已重新渲染 | 注意不要在此处进行导致再次更新的操作 |
| **`beforeDestroy` / `beforeUnmount` | 实例/组件即将销毁 | 用于清理定时器、事件监听等 |
| **`destroyed` / `unmounted` | 实例/组件已销毁 | 所有指令、生命周期钩子、事件监听都被移除 |

---

## 📌 示例代码（Vue 2）

```javascript
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  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')
  }
}
```

---

## 📌 示例代码（Vue 3）

```javascript
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      console.log('onBeforeMount')
    })
    onMounted(() => {
      console.log('onMounted')
    })
    onBeforeUpdate(() => {
      console.log('onBeforeUpdate')
    })
    onUpdated(() => {
      console.log('onUpdated')
    })
    onBeforeUnmount(() => {
      console.log('onBeforeUnmount')
    })
    onUnmounted(() => {
      console.log('onUnmounted')
    })
  }
}
```

---

## ✅ 总结

- **`created`** 是最常用的钩子之一，适合初始化数据。
- **`mounted`** 是操作 DOM 的最佳时机。
- **`beforeDestroy` / `beforeUnmount`** 是清理资源的好地方。
- **`updated`** 要小心使用，避免无限循环更新。

如果你是 Vue 3 用户，推荐使用 **Composition API** 中的生命周期钩子（如 `onMounted`、`onUnmounted`）来替代选项式 API。

需要我帮你画一个生命周期流程图吗？😊