Vue 生命周期 — 组件从创建到销毁

理解Vue组件生命周期的8个钩子函数：created、mounted、updated、unmounted等 · 难度：进阶 · +20XP

什么是生命周期？

每个Vue组件从创建到销毁，会经历一系列"关键时刻"。Vue在这些时刻自动调用对应的钩子函数（Hook），让你在正确的时机执行代码。

生命周期图解

创建阶段：beforeCreate → created → beforeMount → mounted
更新阶段：beforeUpdate → updated
销毁阶段：beforeUnmount → unmounted

最常用的4个钩子

使用方式

选项式API中作为方法定义：

Vue.createApp({
  data() { return { msg: "hello" } },
  created() { console.log("创建了，data可访问:", this.msg); },
  mounted() { console.log("DOM挂载了"); },
  beforeUnmount() { clearInterval(this.timer); }   // ⚠️ 清理！防止内存泄漏
})

常见错误

• ❌ 在 created 中操作DOM → DOM还没挂载
• ❌ mounted 中开了定时器但不清理 → 内存泄漏
• ❌ 在 updated 中修改数据 → 可能无限循环

动手试试

右边演示了mounted和unmounted。打开浏览器控制台可以看到钩子的日志输出。