1-5 生命周期钩子

配套 Demo

在线运行：1-5-lifecycle

组件从「诞生」到「销毁」会经历几个阶段,Vue 在每个阶段提供一个钩子函数,让你插入自己的代码。最常用的就一两个,本章讲清楚什么时候用哪个。

配套 demo:demo/1-5-lifecycle.html(打开 F12 看钩子按顺序打印,并演示最常用的 onMounted 发请求)。

---

1. 组件的一生

一个组件大致经历:

创建 → 挂载到页面(DOM 生成) → 数据更新(可能多次) → 从页面卸载(销毁)
        ↑ onMounted              ↑ onUpdated           ↑ onUnmounted

Vue 3 在 setup 里用这些函数注册钩子:

import { onMounted, onUnmounted } from 'vue';  // CDN 里是 Vue.onMounted

---

2. 最常用:onMounted(组件挂载完成)

时机:组件已经渲染到页面上、DOM 已生成。 用途:初始化数据、发起首次接口请求、操作 DOM、初始化第三方库。

setup() {
  const list = ref([]);

  onMounted(async () => {
    // 页面一出现就去后端拿数据
    const res = await fetch('/api/list');
    list.value = await res.json();
  });

  return { list };
}

这是你 90% 会用到的钩子。「页面打开就要加载列表」= 在 onMounted 里请求。后端类比:像 Controller/页面初始化时预加载数据。

---

3. onUnmounted(组件销毁前)

时机:组件即将从页面移除。 用途:清理——清除定时器、取消订阅、移除事件监听,防止内存泄漏。

setup() {
  let timer;
  onMounted(() => {
    timer = setInterval(() => console.log('tick'), 1000);
  });
  onUnmounted(() => {
    clearInterval(timer);   // 不清理的话组件没了定时器还在跑,内存泄漏
  });
}

口诀:onMounted 里开的东西(定时器/监听),记得在 onUnmounted 里关。

---

4. 其它钩子(了解,用得少)

钩子	时机	常见用途
onBeforeMount	挂载前	很少用
onMounted	挂载完成、DOM 就绪	⭐ 发请求、初始化(最常用)
onBeforeUpdate	数据更新、DOM 重渲染前	很少用
onUpdated	数据更新、DOM 重渲染后	偶尔用,慎用(易死循环)
onBeforeUnmount	卸载前	偶尔
onUnmounted	卸载后	⭐ 清理定时器/监听

新手只需牢记 onMounted 和 onUnmounted 两个,其余用到再查。

---

5. 一个完整例子:进入页面加载数据

const { createApp, ref, onMounted } = Vue;

createApp({
  setup() {
    const users = ref([]);
    const loading = ref(true);

    onMounted(async () => {
      try {
        const res = await fetch('https://jsonplaceholder.typicode.com/users');
        users.value = await res.json();
      } finally {
        loading.value = false;   // 无论成败都关掉 loading
      }
    });

    return { users, loading };
  },
  template: `
    <div v-if="loading">加载中…</div>
    <ul v-else>
      <li v-for="u in users" :key="u.id">{{ u.name }}</li>
    </ul>
  `
}).mount('#app');

这就是真实项目里列表页的标准套路:loading 状态 + onMounted 请求 + v-if/v-else 切换显示。

---

6. Vue 2 对照(了解即可)

Vue 2 的钩子是组件选项里的方法:mounted() {}、created() {}、destroyed() {},直接 this.xxx 访问数据。Vue 3 Composition API 改成了 onMounted(() => {}) 这种函数式,且要从 vue 里 import。对应关系:

• created/mounted → onMounted(setup 本身就相当于 created 时机)
• destroyed → onUnmounted

---

动手练习(用 demo/1-5-lifecycle.html)

1. 打开 demo,先按 F12 切到 Console,刷新页面,观察各钩子打印的顺序。
2. 页面会在 onMounted 里请求一组用户并显示,体会「打开即加载」。
3. demo 里有个秒表(定时器),点「隐藏秒表」让它的组件卸载,看 Console 里 onUnmounted 触发、定时器被清理。
4. 改改请求的 URL 或显示字段,刷新观察。

---

小结

• 组件有生命周期:创建 → 挂载 → 更新 → 卸载。
• onMounted:DOM 就绪,发首次请求 / 初始化(最常用)。
• onUnmounted:清理定时器、监听(防泄漏)。
• 列表页标准套路:loading + onMounted 请求 + v-if/v-else。

🎉 第 1 部分完成!你已掌握 Vue 核心:响应式、指令、组件、生命周期。 ➡️ 接下来进入第 2 部分:工程化开发(Vite 真实项目),告别 CDN,用公司里真正的方式开发。