微前端框架single-spa子应用加载解析
💡
原文中文，约5100字，阅读约需13分钟。
📝
内容提要
本文介绍了single-spa-vue函数库加载子应用的过程和配置，解析了其源码结构和生命周期函数生成过程，并讲述了如何实现子应用状态保持功能。
🎯
关键要点
- 微前端是指存在于浏览器中的微服务。
- 本文分析了single-spa-vue函数库加载子应用的过程和配置。
- 基座应用通过app方法加载子应用的chunk-vendors.js和app.js。
- 子应用的main.js中配置了el、render方法和Vue对象。
- single-spa-vue函数库生成了single-spa的生命周期方法，包括bootstrap、mount和unmount。
- single-spa-vue的源码结构简单，主要提供生成生命周期的函数。
- singleSpaVue方法接收用户配置并返回包含生命周期的对象。
- bootstrap函数在应用首次挂载前调用，mount函数在每次挂载时调用，unmount函数在每次卸载时调用。
- mount方法格式化应用配置项并初始化子应用的DOM对象。
- update方法在调用parcel.update()时触发，unmount方法在页面路由切换时触发。
- single-spa-vue的unmount方法会销毁子应用和vue实例，导致状态丢失。
- 通过改造single-spa-vue类库，可以实现子应用状态保持功能。
- 增加isKeepAlive配置项以隐藏子应用而不是销毁，保持状态。
- 优化mount方法以显示已存在的子应用，提升用户体验。
🏷️
标签
➡️
