🌿 1. created

“我出生了！数据有了，但页面还没长出来。”

  • 数据、方法已准备好，可以访问 this.data。
  • 常用于：发请求、初始化数据。
  • 页面（DOM）还没生成，不能操作。
created() {
  console.log('我出生了！', this.message) // ✅ 能打印
  // 通常在这里请求数据
  // this.fetchData()
}

🌳 2. mounted

“我长出来了！页面已经有了。”

  • 组件已挂载到页面，可以操作 DOM 了！
  • 最常用之一：比如操作图表、定时器、第三方插件。
mounted() {
  console.log('我出现在页面了！')
  // 可以操作 DOM
  // this.$el.querySelector(...)
}

🍁 3. beforeDestroy

“我要被干掉了，趁我还活着，清理一下。”

  • 组件销毁前调用。
  • 常用于：清除定时器、解绑事件、取消订阅。
beforeDestroy() {
  console.log('我要走了')
  // 清理定时器
  // clearInterval(this.timer)
}

✅ 一句话总结使用场景：

生命周期 一句话用途
created 发请求、初始化数据
mounted 操作 DOM、启动插件
beforeDestroy 清理定时器、事件等

记住这个顺序：
出生 → 长身体 → 更新 → 挂了
beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
搞定！🎉