10道高频Qiankun微前端面试题快问快答

※其他的快问快答，看这里！

10道高频Qiankun微前端面试题快问快答
10道高频webpack面试题快问快答
20道高频CSS面试题快问快答
20道高频JavaScript面试题快问快答
30道高频Vue面试题快问快答

面试中的快问快答

快问快答的情景在面试中非常常见。

在面试过程中，面试官通常会使用快问快答的方式来快速评估面试者的基础知识、思维能力和反应速度。

这种情景下，面试官会提出一系列简短的问题，并期望面试者能够迅速做出回答或提供简洁明确的解释。

对于面试者而言，快问快答是一个展示自己知识储备和应变能力的好机会。

在这种情景下，要保持冷静并尽量给出准确的答案。如果不确定或不清楚某个问题，可以直接说明，并表达自己的思考方式和求解问题的能力。

但更建议在快问快答中继续深入理解每个知识点！这有助于对知识的进一步分析！

Qiankun面试题10道快问快答

1. 什么是 qiankun 微前端？

qiankun 是一个基于 single-spa 的微前端实现库，可以帮助我们将多个独立的前端应用整合成一个整体，并且可以独立开发、独立部署、独立运行。

2. qiankun 微前端的优势是什么？

qiankun 微前端的优势包括：

• 可以将多个独立的前端应用整合成一个整体，提高了代码复用性和可维护性。
• 可以独立开发、独立部署、独立运行，提高了开发效率和部署灵活性。
• 可以实现子应用之间的通信和数据共享，提高了应用之间的协作能力。
• 可以实现子应用的按需加载和动态卸载，提高了应用的性能和用户体验。

3. qiankun 微前端的核心概念有哪些？

qiankun 微前端的核心概念包括：

• 主应用：整个微前端应用的入口，负责加载和管理子应用。
• 子应用：独立的前端应用，可以独立开发、独立部署、独立运行。
• 生命周期：主应用和子应用之间的生命周期钩子，用于控制应用的加载、启动、卸载等过程。
• 沙箱：用于隔离子应用的 JavaScript 执行环境，防止子应用之间的冲突和污染。
• 应用间通信：主应用和子应用之间的通信机制，用于实现数据共享和事件传递。

4. qiankun 微前端的基本使用流程是什么？

qiankun 微前端的基本使用流程包括：

• 在主应用中安装 qiankun 库，并注册需要加载的子应用。
• 在子应用中导出一个生命周期对象，并在主应用中注册该子应用。
• 在主应用中启动 qiankun 应用，并指定需要加载的子应用。
• 在主应用中渲染子应用的容器，并在容器中加载子应用。
• 在主应用和子应用中实现应用间通信和数据共享。

5. qiankun 微前端的子应用如何实现按需加载？

qiankun 微前端的子应用可以通过导出一个异步加载函数来实现按需加载，例如：

export async function bootstrap() {
  // 子应用的启动逻辑
}

export async function mount() {
  // 子应用的挂载逻辑
}

export async function unmount() {
  // 子应用的卸载逻辑
}

在主应用中，可以通过 loadMicroApp 方法来动态加载子应用，例如：

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'sub-app',
  entry: '//localhost:8080',
  container: '#sub-app-container',
});

6. qiankun 微前端的子应用如何实现动态卸载？

qiankun 微前端的子应用可以通过导出一个异步卸载函数来实现动态卸载，例如：

export async function unmount() {
  // 子应用的卸载逻辑
}

在主应用中，可以通过 unloadMicroApp 方法来动态卸载子应用，例如：

import { unloadMicroApp } from 'qiankun';

unloadMicroApp('sub-app');

7. qiankun 微前端的子应用如何实现与主应用的通信？

qiankun 微前端的子应用可以通过 window.__POWERED_BY_QIANKUN__ 全局变量来判断当前应用是否运行在 qiankun 微前端环境中，例如：

if (window.__POWERED_BY_QIANKUN__) {
  // 子应用运行在 qiankun 微前端环境中
}

在子应用中，可以通过 window.parent 访问主应用的全局对象，例如：

window.parent.postMessage({ type: 'message', data: 'hello' }, '*');

在主应用中，可以通过 onGlobalStateChange 方法来监听子应用的状态变化，例如：

import { onGlobalStateChange } from 'qiankun';

onGlobalStateChange((state, prev) => {
  // 子应用状态变化的回调函数
});

8. qiankun 微前端的子应用如何实现与其他子应用的通信？

qiankun 微前端的子应用可以通过 window.__POWERED_BY_QIANKUN__ 全局变量来判断当前应用是否运行在 qiankun 微前端环境中，例如：

if (window.__POWERED_BY_QIANKUN__) {
  // 子应用运行在 qiankun 微前端环境中
}

在子应用中，可以通过 window.dispatchEvent 方法来触发自定义事件，例如：

window.dispatchEvent(new CustomEvent('message', { detail: 'hello' }));
在其他子应用中，可以通过 window.addEventListener 方法来监听自定义事件，例如：

window.addEventListener('message', (event) => {
  console.log(event.detail); // 'hello'
});

9. qiankun 微前端的子应用如何实现路由跳转？

qiankun 微前端的子应用可以通过 history.pushState 方法来实现路由跳转，例如：

history.pushState(null, null, '/path');

在主应用中，可以通过 setMatchedPath 方法来设置当前子应用的路由路径，例如：

import { setMatchedPath } from 'qiankun';

setMatchedPath('/path');

在主应用中，可以通过 onGlobalStateChange 方法来监听子应用的路由变化，例如：

import { onGlobalStateChange } from 'qiankun';

onGlobalStateChange((state, prev) => {
  console.log(state.matchedPath); // '/path'
});

10. qiankun 微前端的子应用如何实现样式隔离？

qiankun 微前端的子应用可以通过 CSS Modules 或 CSS-in-JS 等技术来实现样式隔离，例如：

import styles from './index.module.css';

function App() {
  return <div className={styles.container}>Hello World</div>;
}

在主应用中，可以通过 prefetch 方法来预加载子应用的样式，例如：

import { prefetch } from 'qiankun';

prefetch('//localhost:8080/index.css');

在主应用中，可以通过 mount 方法的 sandbox 参数来开启样式隔离，例如：

import { loadMicroApp } from 'qiankun';

loadMicroApp({
  name: 'sub-app',
  entry: '//localhost:8080',
  container: '#sub-app-container',
  sandbox: { strictStyleIsolation: true },
});