【愚公系列】《循序渐进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 组件中使用了多个生命周期钩子来追踪组件的状态变化,例如 onBeforeMountonMountedonBeforeUpdateonUpdated 等。
  • 父组件通过 showcontent 来控制子组件的显示和内容,点击按钮时会更新 content,从而触发子组件的重新渲染。
  • 这些生命周期钩子对于调试和优化 Vue 应用的性能非常有帮助,它们可以帮助我们在组件的不同生命周期阶段执行特定的操作。

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

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

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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