看到题目，大家首先想到的应该是iframe，诚然iframe确实能够做到，然而咱们明天要讲的并不是它，而是新推出的一款微前端框架micro-app。至于为什么不必iframe，能够参考Why Not Iframe。

micro-app是什么

micro-app是一款基于类WebComponent进行渲染的微前端框架，它从组件化的思维实现微前端，旨在升高上手难度、晋升工作效率。它是目前市面上接入微前端老本最低的框架，并且提供了JS沙箱、款式隔离、元素隔离、预加载、资源地址补全、插件零碎、数据通信等一系列欠缺的性能。

micro-app的根本实现思路和single-spa、qiankun相似，但它借鉴了WebComponent的思维，应用CustomElement和自定义的shadowDom，将微前端封装在一个类WebComponent组件中，从而简化了渲染步骤。

如何应用？

1、装置依赖

yarn add @micro-zoe/micro-app

2、引入micro-app

// index.jsimport microApp from '@micro-zoe/micro-app'microApp.start()

3、在页面中应用

<template>  <div id="app">    <!--micro-app标签最终会渲染为一个微前端利用-->    <micro-app name='app1' url='http://localhost:3000/'></micro-app>  </div></template>

渲染成果

能够看出micro-app的应用形式和iframe一样简略，渲染后的html构造和WebComponent相似，那为什么不间接应用WebComponent呢？

次要是因为WebComponent的外围API-ShadowDom的兼容性太差，在react框架下无奈失常运行。ShadowDom次要提供两种性能：款式隔离和元素隔离，即子利用和基座利用能够领有雷同的class、id而不会相互影响。

micro-app模仿实现了ShadowDom的性能，使得子利用的款式和元素作用域固定在micro-app元素外部，micro-app元素就领有了相似ShadowDom的能力。

仔细的童鞋看到这里就会发现了，你这明明是三行代码，和题目不符，你这个题目党！

是的。微前端的应用场景非常复杂，如果子利用只有一个页面，只须要插入micro-app标签即可渲染，如果子利用是多页面利用，还须要批改路由配置。但批改路由配置非常简单，只需几行代码即可搞定，详情请参考这里。即使你从未接触过微前端，也能够在一个小时内搞定所有事件。

数据通信

除了微前端的渲染，数据通信是最麻烦的事件，所幸micro-app的数据通信非常简单，其传递形式和组件属性相似。

<template>  <div id="app">    <!--data数据每次更新时都会发送给子利用-->    <micro-app name='app1' url='http://localhost:3000/' :data='mydata'></micro-app>  </div></template><script>export default {  data() {    return {      mydata: {        type: '发送给子利用的数据'      },    }  }, }</script>

子利用通过事件绑定获取数据

// 子利用window.microApp?.addDataListener((data) => {  console.log("来自基座利用的数据", data)})

总结

micro-app的应用形式和iframe一样简略，但却躲避了iframe存在的问题。除了这些，micro-app还提供了丰盛的性能，能够满足任何业务需要，同时能够实用于任何框架。

有趣味的童鞋快来尝试吧！

相干地址

micro-app代码地址: https://github.com/micro-zoe/...