六十天前端强化训练之第二十五天之组件生命周期大师级详解（Vue3 Composition API 版）-优快云博客

本文链接：https://blog.youkuaiyun.com/speaking_me/article/details/146428517

=====欢迎来到编程星辰海的博客讲解======

看完可以给一个免费的三连吗，谢谢大佬！

一、生命周期核心知识

1.1 生命周期全景图

组件生命周期指的是组件从创建到销毁的完整过程，理解生命周期可以帮助我们在正确的时间执行特定逻辑。Vue3的生命周期分为以下阶段：

TEXT

初始化 → 挂载 → 更新 → 卸载

1.2 生命周期钩子详解

1.2.1 初始化阶段

setup()：Composition API的入口函数，替代Vue2的beforeCreate和created
onBeforeMount：DOM挂载前触发，此时模板已经编译完成

1.2.2 挂载阶段

onMounted：DOM挂载完成后触发，此时可以访问DOM元素
典型应用：数据请求、DOM操作、定时器启动

1.2.3 更新阶段

onBeforeUpdate：数据变化导致DOM更新前触发
onUpdated：DOM更新完成后触发

1.2.4 卸载阶段

onBeforeUnmount：组件实例销毁前触发
onUnmounted：组件实例销毁后触发
典型应用：清除定时器、取消事件监听、释放内存

1.3 生命周期执行顺序

单组件完整流程示例：

JAVASCRIPT

setup()
onBeforeMount()
onMounted()
// 数据更新时
onBeforeUpdate()
onUpdated()
// 组件销毁时
onBeforeUnmount()
onUnmounted()

1.4 父子组件生命周期顺序

父子组件嵌套时的执行顺序：

TEXT

父beforeMount → 子setup → 子beforeMount → 子mounted → 父mounted

二、核心代码示例（带详细注释）

HTML

<template>
  <div>
    <h1>用户数据列表</h1>
    <div v-if="loading">加载中...</div>
    <div v-else-if="error" class="error">{{ error }}</div>
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 使用ref创建响应式数据
    const users = ref([]);
    const loading = ref(true);
    const error = ref(null);

    // 定义异步获取数据的方法
    const fetchData = async () => {
      try {
        // 模拟API调用，1秒后返回数据
        const response = await new Promise(resolve => {
          setTimeout(() => {
            resolve({
              data: [
                { id: 1, name: '张三', email: 'zhangsan@example.com' },
                { id: 2, name: '李四', email: 'lisi@example.com' }
              ]
            });
          }, 1000);
        });

        users.value = response.data;
      } catch (err) {
        error.value = '数据加载失败: ' + err.message;
      } finally {
        loading.value = false;
      }
    };

    // 在挂载阶段执行数据获取
    onMounted(() => {
      console.log('组件已挂载，开始获取数据...');
      fetchData();
      
      // 可以在此处访问DOM元素
      const titleElement = document.querySelector('h1');
      if (titleElement) {
        console.log('标题元素内容:', titleElement.textContent);
      }
    });

    return {
      users,
      loading,
      error
    };
  }
};
</script>

<style>
.error {
  color: red;
  font-weight: bold;
}
</style>

三、实现效果说明

组件挂载时显示"加载中..."
1秒后显示用户列表

控制台输出：

TEXT

组件已挂载，开始获取数据...
标题元素内容: 用户数据列表

效果呈现：

初始状态 → 加载状态 → 成功显示数据
网络错误时显示红色错误提示
精准的生命周期时机把握

四、学习要点总结

4.1 必须掌握的核心知识

onMounted是发起异步请求的最佳时机
避免在onMounted中执行同步阻塞操作
及时在onUnmounted中清理副作用
onUpdated使用时要注意避免无限循环

4.2 最佳实践技巧

数据请求要配合加载状态和错误处理
使用try/catch处理异步操作错误
在onMounted中访问DOM需确保元素存在
复杂组件建议使用onScopeDispose管理副作用

4.3 常见误区警示

在setup中直接进行DOM操作（此时DOM尚未渲染）
忘记处理异步操作的加载和错误状态
在onUpdated中修改响应式数据导致循环更新
未在卸载时清理定时器/事件监听器导致内存泄漏

五、扩展阅读推荐

5.1 官方文档

5.2 优质文章

5.3 推荐工具库

VueUse - 常用组合式API工具集
Pinia - 新一代状态管理库
Vite - 新一代构建工具

六、深度思考题

如果在onMounted中设置的定时器没有在onUnmounted中清除，会导致什么问题？
服务端渲染(SSR)场景下生命周期有何不同？
如何测试组件生命周期的正确执行顺序？
onMounted和watchEffect的执行顺序是怎样的？

通过系统学习生命周期知识，开发者可以精准掌控组件行为，写出更健壮、可维护的Vue应用。建议结合官方文档和实际项目进行实践，加深理解。