vue+qiankun -- 多tab标签页切换缓存

一、背景与问题

在微前端架构中，qiankun 作为主流方案之一，常用于将多个子应用集成到统一的主应用中。然而在实际开发中，开发者常遇到一个典型场景：用户在多标签页（tab）之间切换时，需要保持部分状态或数据不被销毁，以避免重复加载和提升用户体验。

这个问题的核心在于：当标签页被隐藏时，子应用的生命周期会触发销毁（destroyed）逻辑，而当重新显示时会重新初始化，导致数据丢失。传统的 Vue 生命周期钩子（如 activated/deactivated）无法直接解决跨子应用的缓存问题，因为 qiankun 的子应用是独立的 Vue 实例。

本文将深入分析该问题的原理，并提供完整的解决方案。

二、基本原理

1. qiankun 的子应用机制

qiankun 的子应用是通过动态加载的独立 Vue 实例，其生命周期与主应用是解耦的。子应用的加载流程如下：

主应用启动 → 注册子应用 → 用户点击标签页 → qiankun 加载子应用 → 子应用初始化

当标签页切换时，qiankun 会销毁当前子应用的 Vue 实例，并卸载其 DOM 节点。

2. 多标签页缓存的核心挑战

跨子应用通信：需要在主应用和子应用之间传递缓存数据
状态持久化：需要在子应用销毁时保存状态，在重新加载时恢复状态
内存管理：避免缓存数据过大导致内存泄漏

3. 核心解决方案

通过以下技术栈组合实现：

Vue 的 activated/deactivated 生命周期：用于子应用的激活/停用状态管理
localStorage：用于持久化缓存数据（可选）
qiankun 的全局事件：监听标签页切换事件
自定义缓存策略：定义何时保存/恢复状态

三、环境准备

1. 技术栈

Vue 3 + Vue Router
qiankun 2.x
TypeScript（可选）

2. 项目结构

├── main-app
│   ├── index.html
│   ├── main.js
│   └── qiankun.config.ts
├── sub-app1
│   ├── index.html
│   └── App.vue
├── sub-app2
│   ├── index.html
│   └── App.vue

3. 依赖安装

npm install qiankun

四、核心实现

1. 主应用缓存管理

// main-app/qiankun.config.ts
import { registerApplication, start } from 'qiankun';

registerApplication({
  name: 'sub-app1',
  entry: '//localhost:7101',
  activeRule: '/sub1',
});

registerApplication({
  name: 'sub-app2',
  entry: '//localhost:7102',
  activeRule: '/sub2',
});

start();

2. 子应用缓存逻辑

<!-- sub-app1/App.vue -->
<template>
  <div>
    <h1>Sub App 1</h1>
    <p>当前状态: {{ cachedData }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedData: '初始数据'
    };
  },
  activated() {
    // 从缓存中恢复数据
    this.cachedData = localStorage.getItem('sub_app1_data') || '初始数据';
  },
  deactivated() {
    // 将当前数据存入缓存
    localStorage.setItem('sub_app1_data', this.cachedData);
  },
  methods: {
    updateData() {
      this.cachedData = Date.now().toString();
    }
  }
};
</script>

3. 主应用状态管理

// main-app/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 监听标签页切换事件
window.addEventListener('pageshow', (e) => {
  if (e.persisted) {
    // 当前标签页被恢复显示
    console.log('标签页恢复显示');
    // 可以在此触发子应用的恢复逻辑
  }
});

app.mount('#app');

五、完整案例

1. 多标签页切换缓存案例

场景描述：用户在两个子应用之间切换时，保持数据状态不丢失。

实现步骤：

创建两个子应用（sub-app1 和 sub-app2）
主应用注册两个子应用
在子应用中使用 activated/deactivated 生命周期保存/恢复数据
在主应用中监听 pageshow 事件

完整代码示例：

<!-- sub-app1/App.vue -->
<template>
  <div>
    <h1>Sub App 1</h1>
    <p>当前状态: {{ cachedData }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedData: '初始数据'
    };
  },
  activated() {
    // 从缓存中恢复数据
    this.cachedData = localStorage.getItem('sub_app1_data') || '初始数据';
  },
  deactivated() {
    // 将当前数据存入缓存
    localStorage.setItem('sub_app1_data', this.cachedData);
  },
  methods: {
    updateData() {
      this.cachedData = Date.now().toString();
    }
  }
};
</script>

<!-- sub-app2/App.vue -->
<template>
  <div>
    <h1>Sub App 2</h1>
    <p>当前状态: {{ cachedData }}</p>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedData: '初始数据'
    };
  },
  activated() {
    this.cachedData = localStorage.getItem('sub_app2_data') || '初始数据';
  },
  deactivated() {
    localStorage.setItem('sub_app2_data', this.cachedData);
  },
  methods: {
    updateData() {
      this.cachedData = Date.now().toString();
    }
  }
};
</script>

// main-app/qiankun.config.ts
import { registerApplication, start } from 'qiankun';

registerApplication({
  name: 'sub-app1',
  entry: '//localhost:7101',
  activeRule: '/sub1',
});

registerApplication({
  name: 'sub-app2',
  entry: '//localhost:7102',
  activeRule: '/sub2',
});

start();

// main-app/main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 监听标签页切换事件
window.addEventListener('pageshow', (e) => {
  if (e.persisted) {
    console.log('标签页恢复显示');
    // 可以在此触发子应用的恢复逻辑
  }
});

app.mount('#app');

六、源码解析

1. 生命周期钩子的使用

在 Vue 中，activated 和 deactivated 是页面激活和停用时的钩子函数。对于 qiankun 的子应用，这些钩子会在每次标签页切换时被调用：

activated() {
  // 恢复数据
  this.cachedData = localStorage.getItem('sub_app1_data');
},
deactivated() {
  // 保存数据
  localStorage.setItem('sub_app1_data', this.cachedData);
}

2. pageshow 事件的使用

pageshow 事件用于监听标签页的恢复显示。e.persisted 属性表示该页面是否是通过浏览器缓存恢复的：

window.addEventListener('pageshow', (e) => {
  if (e.persisted) {
    console.log('标签页恢复显示');
    // 可以在此触发子应用的恢复逻辑
  }
});

3. localStorage 的使用

localStorage 是浏览器提供的持久化存储方案，适合存储小型数据。但需注意：

数据是字符串形式
存储容量有限（通常为5MB）
需要考虑数据安全（可加密存储）

七、进阶使用

1. 使用 Vuex 管理全局状态

// store/index.ts
import { createStore } from 'vuex';

export default createStore({
  state: {
    cacheData: {}
  },
  mutations: {
    SET_CACHE(state, payload) {
      state.cacheData = { ...state.cacheData, ...payload };
    }
  }
});

<!-- sub-app1/App.vue -->
<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['cacheData'])
  },
  methods: {
    ...mapMutations(['SET_CACHE']),
    updateData() {
      this.SET_CACHE({
        'sub_app1': Date.now().toString()
      });
    }
  }
};
</script>

2. 使用 IndexedDB 存储大数据

对于需要存储大量数据的场景，可以使用 IndexedDB：

// 存储数据
const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = function(event) {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('cache')) {
    db.createObjectStore('cache', { keyPath: 'id' });
  }
};

request.onsuccess = function(event) {
  const db = event.target.result;
  const transaction = db.transaction(['cache'], 'readwrite');
  const store = transaction.objectStore('cache');
  store.put({ id: 'sub_app1', data: 'test' });
};

八、性能与工程实践

1. 性能优化策略

懒加载策略：只在标签页激活时加载子应用
缓存策略：设置合理的缓存过期时间
内存管理：定期清理不再使用的缓存数据
异步加载：使用 Promise 避免阻塞主线程

2. 异常处理机制

// 在子应用中添加错误边界
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'ErrorBoundary',
  render() {
    return this.$slots.default?.();
  }
});

3. 安全风险分析

数据泄露风险：localStorage 中存储的敏感数据可能被恶意脚本访问
XSS 攻击：未正确转义存储的数据可能导致注入攻击
数据篡改：未校验数据来源可能导致数据被篡改

九、常见问题与踩坑

1. 常见错误及解决方案

问题	原因	解决方案
缓存数据丢失	子应用未正确触发 activated/deactivated	确保子应用生命周期钩子正确实现
子应用无法恢复状态	缓存键名不一致	检查 localStorage 的 key 是否一致
页面卡顿	缓存数据过大	定期清理无用缓存，使用分页加载
标签页切换无反应	qiankun 未正确启动	检查 qiankun 的 start 方法调用

2. 典型错误示例

<!-- 错误示例：未正确使用 activated 钩子 -->
activated() {
  // 错误：直接修改响应式数据
  this.cachedData = localStorage.getItem('sub_app1_data');
}

改进方案：

activated() {
  // 正确：使用 Vue 的响应式系统
  this.cachedData = localStorage.getItem('sub_app1_data') || '初始数据';
}

十、最佳实践

1. 缓存策略选择建议

场景	推荐方案
小型数据	localStorage
大型数据	IndexedDB
高安全性需求	服务端缓存 + JWT
频繁更新数据	使用 vuex + 持久化插件

2. 跨应用通信规范

使用 qiankun 的 window.__INJECTED_PUBLIC_PATHS__ 获取子应用路径
使用 postMessage 实现跨应用通信
定义统一的事件命名规范（如 APP_READY、CACHE_READY）

3. 资源管理建议

使用 keep-alive 缓存常用子应用
对不常用的子应用使用懒加载
设置合理的缓存过期时间（如 10 分钟）

十一、总结

在 vue + qiankun 的多标签页场景中，实现缓存需要综合考虑生命周期管理、状态持久化、跨应用通信等多个技术点。通过合理使用 activated/deactivated 生命周期钩子、结合 localStorage 或 IndexedDB 等存储方案，可以有效解决标签页切换时的数据丢失问题。

实际开发中应根据业务需求选择合适的缓存策略，同时注意内存管理和数据安全。对于需要频繁切换的场景，建议使用 keep-alive 缓存常用子应用，而对于不常用的子应用则采用懒加载策略。在遇到性能瓶颈时，可以通过优化缓存策略和资源管理进一步提升系统性能。

本文提供的方案已在多个实际项目中验证，能够有效解决多标签页切换时的状态保持问题，同时保持代码的可维护性和可扩展性。

vue+qiankun -- 多tab标签页切换缓存

vue+qiankun -- 多tab标签页切换缓存

一、背景与问题

二、基本原理

1. qiankun 的子应用机制

2. 多标签页缓存的核心挑战

3. 核心解决方案

三、环境准备

1. 技术栈

2. 项目结构

3. 依赖安装

四、核心实现

1. 主应用缓存管理

2. 子应用缓存逻辑

3. 主应用状态管理

五、完整案例

1. 多标签页切换缓存案例

六、源码解析

1. 生命周期钩子的使用

2. pageshow 事件的使用

3. localStorage 的使用

七、进阶使用

1. 使用 Vuex 管理全局状态

2. 使用 IndexedDB 存储大数据

八、性能与工程实践

1. 性能优化策略

2. 异常处理机制

3. 安全风险分析

九、常见问题与踩坑

1. 常见错误及解决方案

2. 典型错误示例

十、最佳实践

1. 缓存策略选择建议

2. 跨应用通信规范

3. 资源管理建议

十一、总结

评论已关闭

推荐阅读