Java 前端及 应用教程 8

第4章组件化开发进阶组件化开发进阶01本章学习目标

动态组件与事件处理掌握动态组件切换、属性事件处理及KeepAlive组件使用。

生命周期与组件交互熟悉生命周期钩子函数，理解父子组件执行顺序与应用场景。

插槽运用技巧熟练使用基本、具名、作用域和动态插槽增强组件功能。

组合式API实战通过实战案例，提升组件化开发中知识综合应用与逻辑封装能力。动态组件：使用component标签实现动态组件切换Vue3.x中<component>标签是动态组件切换关键工具，通过is属性根据绑定数据动态渲染不同组件。动态组件：使用component标签实现动态组件切换

动态组件实现通过currentComponent变量绑定<component>标签的is属性，实现组件动态切换，适用于多视图应用，用户操作可触发不同功能模块展示。currentComponent作用存储当前显示组件名称，响应式变化，驱动<component>动态渲染对应组件，支持用户操作引发的视图切换。动态组件：动态组件的属性绑定与事件处理属性绑定与事件监听

动态组件属性绑定通过:message绑定父组件dynamicMessage属性至Home.vue，实现动态数据传递。动态组件事件处理使用@button-clicked监听Home.vue按钮点击，父组件handleButtonClick方法响应处理，增强组件交互。动态组件：动态组件的动态加载与异步渲染

异步组件加载实际项目中为提高应用性能，常需动态加载和异步渲染组件，Vue3.x提供defineAsyncComponent()函数实现此功能。动态组件：动态组件的动态加载与异步渲染动态import实现

动态组件加载通过defineAsyncComponent接收返回动态import()函数,点击按钮触发loadBigComponent方法使shouldShowBigComponent为true,<component>标签动态加载BigComponent.vue。

异步渲染优势异步加载减少应用初始加载时间,提升用户体验,尤其处理大体积或不常用组件时效果显著。动态组件：KeepAlive的作用与工作原理KeepAlive组件介绍KeepAlive是Vue3.x内置组件，作用是缓存不活动组件实例而非销毁，保留组件状态，避免重新渲染。KeepAlive的工作原理KeepAlive基于Vue组件缓存机制，组件切换时缓存而非销毁，再次渲染优先从缓存获取实例，提高切换性能。动态组件：include与exclude属性的使用KeepAlive缓存原理KeepAlive组件通过include和exclude属性控制缓存，include指定需缓存组件名或正则，exclude指定不需缓存的。动态组件：include与exclude属性的使用缓存特定组件示例

动态组件缓存通过:include=['ComponentA','ComponentB']缓存ComponentA和ComponentB，ComponentC不被缓存，返回时保留前状态。组件状态管理利用include属性指定缓存组件，exclude未提及的组件如ComponentC将不被缓存，实现组件状态有效管理。动态组件：缓存组件的生命周期钩子函数变化

KeepAlive缓存与mounted钩子函数的变化组件被KeepAlive缓存时，mounted仅首次挂载调用，再次显示不调用，由activated钩子函数替代。activated()钩子函数在组件被激活时的调用组件首次挂载时设置message值。组件缓存后再次显示，不调用mounted()，调用activated()并更新message值为组件被激活。beforeDestroy()与deactivated()钩子函数的区别beforeDestroy()在组件销毁时调用；被缓存组件切换出去不调用beforeDestroy()，调用deactivated()，用于清理操作。组件被缓存前的deactivated()钩子函数调用组件即将被销毁（非缓存场景）时控制台输出“组件即将被销毁”；即将被缓存（切换出去）时输出“组件即将被缓存”。组件的生命周期：组件生命周期及钩子函数回调方法执行组件生命周期概览

Vue3.x组件有创建、挂载、运行、销毁生命周期阶段，生命周期钩子函数在各阶段自动调用，供开发者执行自定义代码。生命周期钩子的应用

生命周期钩子助力开发者实现数据初始化、DOM操作、资源清理等，精准控制组件行为和状态，涵盖创建、挂载、更新、销毁阶段。提升应用性能与体验

合理运用生命周期钩子函数，能有效提升应用的性能和用户体验，是Vue开发中不可或缺的重要部分。组件的生命周期：组件创建阶段的生命周期钩子函数

组件创建前的初始化beforeCreate()钩子在组件实例开始创建但数据观测和事件配置未完成时调用，此时无法访问data、methods等属性，可进行全局初始化操作，使用场景较少。组件的生命周期：组件创建阶段的生命周期钩子函数

组件创建阶段使用onCreated钩子，异步调用getUserInfo获取用户信息，存储于响应式变量userInfo，用于模板展示。组件的生命周期：组件挂载阶段的生命周期钩子函数beforeMount()钩子函数

组件挂载阶段beforeMount()在DOM挂载前调用，模板已编译，不可操作DOM，适合做最后准备，如设置加载状态。

示例代码使用beforeMount设置isLoading为true，模拟异步操作后设为false，展示组件实际内容。组件的生命周期：组件挂载阶段的生命周期钩子函数mounted()钩子函数

mounted()钩子函数组件成功挂载后调用，可直接操作DOM，适合进行依赖DOM的初始化工作，如初始化第三方插件。示例代码使用mounted()钩子函数初始化地图插件maplibre-gl，设置地图样式、中心点和缩放级别，挂载至ID为"map"的DOM元素。组件的生命周期：组件更新阶段的生命周期钩子函数组件更新前准备

beforeUpdate()钩子函数在组件数据更新、未渲染时调用，用于数据校验或准备工作，示例代码检查message长度，超10字符则控制台提示。

组件更新阶段beforeUpdate()于数据变化、渲染前执行，适合做更新前的状态检查或处理。组件的生命周期：组件更新阶段的生命周期钩子函数组件更新后处理

updated()钩子函数在组件数据更新并完成渲染后调用，DOM已更新，适合执行依赖于最新DOM状态的操作，如重绘图表。

示例代码功能展示Vue3.x中updated()钩子的使用，通过点击按钮更新数据，触发钩子函数，自动重新绘制图表，演示数据变化后的DOM操作。组件的生命周期：组件销毁阶段的生命周期钩子函数

组件销毁前的准备工作beforeUnmount()在组件销毁前调用，组件仍可用，可访问数据和方法，用于清除定时器、解绑事件监听器等清理工作。

组件销毁后的处理unmounted()钩子函数在组件销毁后调用，此时指令解绑、DOM关联切断、事件监听器和子组件销毁，用于最终资源释放。组件的生命周期：父子组件生命周期钩子函数的执行顺序父子组件创建流程

父子组件生命周期父组件beforeCreate()先于子组件，子组件mounted()后调用父组件mounted()，确保数据流与交互正确。

生命周期钩子顺序父组件created()后开始子组件创建，子组件beforeMount()前父组件不会mounted()，维护组件间依赖关系。组件的生命周期：父子组件生命周期钩子函数的执行顺序

更新过程中的钩子调用父子组件更新时，先调用父组件beforeUpdate()获取更新前数据，再调用子组件beforeUpdate()，最后调用父组件updated()。组件的生命周期：父子组件生命周期钩子函数的执行顺序销毁阶段的钩子执行

01父子组件销毁顺序父组件beforeUnmount()先执行，随后子组件beforeUnmount()和unmounted()，最后父组件unmounted()。

02理解执行顺序的意义有助于适时数据处理、资源管理及组件协同，确保应用稳定运行与高性能。插槽：插槽的基本概念与默认内容

插槽基础概念Vue3.x组件开发中，插槽是子组件模板预留的占位符，允许父组件传递HTML内容片段以实现组件内容灵活定制。

插槽使用示例在子组件中用<slot>标签定义插槽，示例为创建Box.vue组件，引入后使用<Box>标签包裹自定义插槽内容。

插槽的灵活性父组件向子组件插槽插入自定义内容，替换默认内容，无需修改子组件核心代码，提高组件复用性和灵活性。插槽：具名插槽的定义与使用具名插槽定义

具名插槽定义具名插槽通过给<slot>加name属性定义，允许父组件向子组件指定位置插入内容，实现定制化布局。

具名插槽使用Box.vue组件示例中，定义header、body、footer三个具名插槽，提供默认内容，父组件可覆盖以自定义显示。插槽：具名插槽的定义与使用父组件使用具名插槽

具名插槽定义通过v-slot指令指定插槽名,支持完整与缩写形式,增强组件内容定制灵活性。

具名插槽使用父组件用v-slot:header、#body、v-slot:footer填充子组件具名插槽,未填充则显示默认内容,满足复杂布局需求。插槽：具名插槽在复杂布局中的应用具名插槽在页面布局中的应用

01具名插槽作用实现组件模块化设计，提升代码可维护性与复用性，关键于复杂页面布局。

02PageLayout.vue示例通过header、main-content、footer具名插槽划分页面区域，采用flex布局确保内容占据整个视口，样式统一，结构清晰。插槽：具名插槽在复杂布局中的应用HomePage.vue组件示例

01PageLayout.vue组件通过具名插槽header、main-content和footer定义页面头部、主体和底部，实现布局模块化。

02HomePage.vue示例在具名插槽中插入特定内容，如欢迎语、主要内容和版权信息，展示首页结构。插槽：具名插槽在复杂布局中的应用

提高开发效率和代码复用性具名插槽使HomePage.vue定制PageLayout.vue各部分，无需重复编写布局代码，提高开发效率和代码复用性，结构清晰便于维护修改。插槽：作用域插槽的数据传递与渲染作用域插槽基础作用域插槽是特殊插槽，允许子组件将自身数据传递到父组件，供父组件在插槽内容渲染时使用，子组件通过在<slot>标签上绑定属性传递数据。插槽：作用域插槽的数据传递与渲染ItemList.vue组件示例

插槽：作用域插槽ItemList.vue组件用v-for遍历items数组，通过<slot>标签绑定item属性，传递列表项数据，实现作用域插槽的数据传递与渲染。插槽：作用域插槽的数据传递与渲染

01插槽数据传递父组件使用v-slot接收子组件数据，通过slotProps对象访问，实现动态渲染。

02插槽示例代码示例展示了ItemList组件数据传递，父组件根据name和price属性进行渲染，提高组件通用性和扩展性。插槽：作用域插槽在列表渲染中的应用

作用域插槽列表应用作用域插槽在列表渲染中应用广泛，能依据业务需求实现多样化列表项展示，如电商商品列表可按用户角色展示不同操作按钮。插槽：作用域插槽在列表渲染中的应用创建商品列表组件

创建商品列表组件ProductList.vue使用v-for遍历products数组，通过<slot>传递每个商品数据至父组件。

作用域插槽应用在列表渲染中，利用作用域插槽和v-for结合，动态展示商品信息，实现数据的有效传递。插槽：作用域插槽在列表渲染中的应用根据用户角色进行渲染

作用域插槽应用父组件根据用户角色动态渲染子组件内容，管理员可见编辑、删除按钮，普通用户见购物车按钮，提升用户体验。

代码示例使用作用域插槽接收子组件ProductList.vue传递的数据，通过i