【愚公系列】《循序渐进Vue.js 3.x前端开发实践》026-组件的生命周期

举报
愚公搬代码 发表于 2025/02/28 23:20:26 2025/02/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
标题 详情
作者简介 愚公搬代码
头衔 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容 .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎 👍点赞、✍评论、⭐收藏

🚀前言

在 Vue.js 的世界中，组件不仅是构建用户界面的基本单元，更是应用逻辑和交互的核心。理解组件的生命周期以及如何进行高级配置，是提升开发效率和优化应用性能的关键所在。每个组件在其存在的过程中，都经历了一系列的生命周期钩子，这些钩子为我们提供了在特定时刻执行代码的机会，使我们能够精准地控制组件的行为和状态。

本篇文章将深入探讨 Vue 组件的生命周期，包括各个生命周期钩子的作用和使用场景。此外，我们还将介绍一些高级配置技巧，例如如何使用混入（mixins）、自定义指令和异步组件等，以增强组件的功能和灵活性。通过这些内容，你将能够更好地管理组件的创建、更新和销毁过程，从而提升应用的性能和可维护性。

🚀一、组件的生命周期

🔎1.HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件生命周期</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <sub-com v-if="show">
            {{content}}
        </sub-com>
        <button @click="changeShow">测试</button>
    </div>
    <script>
        ...
    </script>
</body>
</html>

在这里插入图片描述

🦋1.1 功能概述：

  • sub-com 是一个自定义的子组件，使用 v-if="show" 控制其显示或隐藏。
  • button 按钮的点击事件绑定了 changeShow 方法，用于更新 content 的值。每点击一次，content 会增加 1。
  • sub-com 组件会在父组件中展示内容，{{content}} 会显示当前的 content 值。

🔎2.JavaScript 部分解析

🦋2.1 引入 Vue 3

const { createApp, ref } = Vue;
  • createApp：创建 Vue 应用实例。
  • ref：用于创建响应式变量。

🦋2.2 定义 sub-com 子组件

const sub = {
    setup() {
        console.log("组件创建前");

        Vue.onBeforeMount(() => {
            console.log("组件被即将挂载前");
        });

        Vue.onMounted(() => {
            console.log("组件挂载完成");
        });

        Vue.onBeforeUpdate(() => {
            console.log("组件即将更新前");
        });

        Vue.onUpdated(() => {
            console.log("组件更新完成");
        });

        Vue.onActivated(() => {
            console.log("被缓存的组件激活时调用");
        });

        Vue.onDeactivated(() => {
            console.log("被缓存的组件停用时调用");
        });

        Vue.onBeforeUnmount(() => {
            console.log("组件即将被卸载前调用");
        });

        Vue.onUnmounted(() => {
            console.log("组件被卸载后调用");
        });

        Vue.onErrorCaptured((error, instance, info) => {
            console.log("捕获到来自子组件的异常时调用");
        });

        Vue.onRenderTracked((event) => {
            console.log("虚拟DOM重新渲染时调用", event);
        });

        Vue.onRenderTriggered((event) => {
            console.log("虚拟DOM被触发渲染时调用");
        });

        console.log("组件创建完成");
    },
    template: `
        <div>
            <slot></slot>
        </div>
    `
};

🦋2.3 生命周期钩子解析

Vue 3 提供了一系列的生命周期钩子，帮助我们在组件的不同阶段执行特定的逻辑。以下是该代码中使用的生命周期钩子：

  1. onBeforeMount：

    • 在组件挂载前调用。此时模板还未渲染到 DOM 中，但组件实例已经创建。
    • 输出：“组件被即将挂载前”。

  2. onMounted：

    • 组件挂载完成后调用。此时，组件模板已经渲染并插入到 DOM 中。
    • 输出：“组件挂载完成”。

  3. onBeforeUpdate：

    • 当组件的数据发生变化，并且导致重新渲染之前调用。此时，组件的数据更新还未发生，虚拟 DOM 已经计算完毕，但真实 DOM 还未更新。
    • 输出：“组件即将更新前”。

  4. onUpdated：

    • 组件更新完成后调用。即数据变化导致的视图更新完成后会触发此钩子。
    • 输出：“组件更新完成”。

  5. onActivated：

    • 仅在 keep-alive 缓存组件时有效，当组件被激活时触发。
    • 输出：“被缓存的组件激活时调用”。

  6. onDeactivated：

    • 仅在 keep-alive 缓存组件时有效，当组件被停用时触发。
    • 输出：“被缓存的组件停用时调用”。

  7. onBeforeUnmount：

    • 组件卸载前调用。此时，组件实例仍然存在，可以执行清理操作。
    • 输出：“组件即将被卸载前调用”。

  8. onUnmounted：

    • 组件被卸载后调用。此时，组件实例和绑定的事件已经清理。
    • 输出：“组件被卸载后调用”。

  9. onErrorCaptured：

    • 当组件中的任何子组件抛出错误时会触发此钩子，可以捕获错误并进行处理。
    • 输出：“捕获到来自子组件的异常时调用”。

  10. onRenderTracked：

    • 这是一个调试用钩子，在虚拟 DOM 渲染时跟踪变化。每当虚拟 DOM 中的某个元素被跟踪时会触发该钩子。
    • 输出：“虚拟DOM重新渲染时调用”。

  11. onRenderTriggered：

    • 这是一个调试用钩子，在虚拟 DOM 渲染时触发。每当触发虚拟 DOM 更新时调用此钩子。
    • 输出：“虚拟DOM被触发渲染时调用”。

🦋2.4 父组件部分

const App = createApp({
    setup() {
        const show = ref(true);     // 控制 sub-com 是否显示
        const content = ref(0);     // 内容，初始化为 0

        const changeShow = () => {
            // show.value = !show.value;
            content.value += 1;     // 每点击一次按钮，content 自增 1
        };

        return { show, content, changeShow };
    }
});
  • show：这是一个响应式变量，控制 sub-com 组件的显示与隐藏。它的初始值是 true，表示子组件一开始是显示的。
  • content：这是一个响应式变量，用于存储传递给 sub-com 组件的内容，初始值为 0。
  • changeShow：这是一个方法，每次点击按钮时，content 会增加 1，从而触发子组件的重新渲染。

🦋2.5 组件挂载

App.component("sub-com", sub);
App.mount("#Application");
  • App.component("sub-com", sub)：注册 sub-com 组件，告诉 Vue 这个组件可以在模板中使用。
  • App.mount("#Application")：将 Vue 应用实例挂载到 HTML 中 id="Application" 的元素上，启动 Vue 应用。

🔎3.总结

这段代码展示了 Vue 3 中的生命周期钩子以及如何在组件中使用它们：

  • 在 sub-com 组件中使用了多个生命周期钩子来追踪组件的状态变化，例如 onBeforeMount、onMounted、onBeforeUpdate、onUpdated 等。
  • 父组件通过 show 和 content 来控制子组件的显示和内容，点击按钮时会更新 content，从而触发子组件的重新渲染。
  • 这些生命周期钩子对于调试和优化 Vue 应用的性能非常有帮助，它们可以帮助我们在组件的不同生命周期阶段执行特定的操作。

通过这些钩子，开发者可以更加细致地控制组件的生命周期，进行资源清理、性能优化或错误捕获等操作。

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
JavaScript Vue
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入