微前端microApp备忘录

1.主应用中抛出警告，micro-app未定义
Vue.config.ignoredElements = [
'micro-app',
]

2.Vue主应用加载子应用或跳转时子应用频繁卸载和渲染
原因：如果将route.fullPath或route.path设置为key，那么当路由变化时Vue会重新渲染组件，导致<micro-app>元素被频繁卸载和渲染。
解决方式：将主应用中<router-view>或包含<micro-app>元素的上层组件中:key="route.fullPath"或:key="route.path"改为:key="route.name"

3.配置
inline：
开启inline模式后，script元素会被保留，方便查看和调试代码，但会稍微损耗性能，建议只在开发环境中使用

clear-data（还有destroy）
默认情况下，子应用被卸载后数据通讯中的缓存数据会被保留，如果你希望清空这些数据，设置clear-data即可

disable-scopecss
关闭样式隔离可以提升页面渲染速度，在此之前，请确保各应用之间样式不会相互污染

disable-sandbox
关闭js沙箱可能会导致一些不可预料的问题，通常情况不建议这样做

ssr
当子应用是ssr应用时，需要设置ssr属性，此时micro-app会根据ssr模式加载子应用

keep-alive
开启keep-alive后，应用卸载时会进入缓存，而不是销毁它们，以便保留应用的状态和提升重复渲染的性能。keep-alive的优先级小于destroy，当两者同时存在时，keep-alive将失效

default-page
默认情况下，子应用渲染后会展示首页，设置default-page可以指定子应用渲染的页面

router-mode
路由模式分为：search、native、native-scope、pure、state，每种模式对应不同的功能，以满足尽可能多的项目需求

baseroute
在微前端环境下，子应用可以从window.__MICRO_APP_BASE_ROUTE__上获取baseroute的值，用于设置基础路径。只有路由模式是native或native-scope我们才需要设置baseroute

keep-router-state
设置keep-router-state可以保留子应用路由状态，在卸载后重新渲染时将恢复卸载前的页面（页面中的状态不保留）

disable-memory-router
默认情况下，子应用将运行在虚拟路由系统中，和主应用的路由系统进行隔离，避免相互影响。设置disable-memory-router后，子应用将基于浏览器的路由系统进行渲染，拥有更加简洁优雅的的浏览器地址

disable-patch-request
默认情况下，MicroApp对子应用的fetch、XMLHttpRequest、EventSource进行重写，当请求相对地址时会使用子应用域名自动补全
如：fetch('/api/data') 补全为 fetch(子应用域名 + '/api/data')
如果不需要这样的补全，可以配置disable-patch-request进行关闭，此时相对地址会兜底到主应用域名。
如：fetch('/api/data') 兜底为 fetch(主应用域名 + '/api/data')

fiber
默认情况下，子应用js是同步执行的，这会阻塞主应用的渲染线程，当开启fiber后，micro-app会降低子应用的优先级，通过异步执行子应用的js文件，以减小对主应用的影响，快速响应用户操作

globalAssets
globalAssets用于设置全局共享资源，它和预加载的思路相同，在浏览器空闲时加载资源并放入缓存，提高渲染效率。
当子应用加载相同地址的js或css资源时，会直接从缓存中提取数据，从而提升渲染速度

exclude(过滤元素)
当子应用不需要加载某个js或css，可以通过在link、script、style设置exclude属性，当micro-app遇到带有exclude属性的元素会进行删除

ignore(忽略元素)
当link、script、style元素具有ignore属性，micro-app不会处理它，元素将原封不动进行渲染。
使用场景例如：jsonp
jsonp会创建一个script元素加载数据，正常情况script会被拦截导致jsonp请求失败，此时可以给script元素添加ignore属性，跳过拦截。

4.环境变量
__MICRO_APP_ENVIRONMENT__
描述：判断应用是否在微前端环境中

__MICRO_APP_NAME__
描述：应用名称

__MICRO_APP_PUBLIC_PATH__
描述：子应用的静态资源前缀

__MICRO_APP_BASE_ROUTE__
描述：子应用的基础路径

__MICRO_APP_BASE_APPLICATION__
描述：判断当前应用是否是主应用

rawWindow
描述：获取真实window（即主应用window）

rawDocument
描述：获取真实document（即主应用document）

5.数据通信
一、子应用获取来自主应用数据
方式1：直接获取数据
const data = window.microApp.getData() // 返回主应用下发的data数据
方式2：绑定监听函数
/**
* 绑定监听函数，监听函数只有在数据变化时才会触发
* dataListener: 绑定函数
* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
* !!!重要说明: 因为子应用是异步渲染的，而主应用发送数据是同步的，
* 如果在子应用渲染结束前主应用发送数据，则在绑定监听函数前数据已经发送，在初始化后不会触发绑定函数，
* 但这个数据会放入缓存中，此时可以设置autoTrigger为true主动触发一次监听函数来获取数据。
*/
window.microApp.addDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)
// 解绑监听函数
window.microApp.removeDataListener(dataListener: (data: Object) => any)
// 清空当前子应用的所有绑定函数(全局数据函数除外)
window.microApp.clearDataListener()

二、子应用向主应用发送数据
// dispatch只接受对象作为参数
window.microApp.dispatch({type: '子应用发送给主应用的数据'})
dispatch只接受对象作为参数，它发送的数据都会被缓存下来。
micro-app会遍历新旧值中的每个key判断值是否有变化，如果所有数据都相同则不会发送（注意：只会遍历第一层key），如果数据有变化则将新旧值进行合并后发送。
dispatch第二个参数为回调函数，它会在数据发送结束后执行；当数据监听函数有返回值时，会作为dispatch回调函数的入参

forceDispatch：强制发送
forceDispatch方法拥有和dispatch一样的参数和行为，唯一不同的是forceDispatch会强制发送数据，无论数据是否变化。

三、主应用向子应用发送数据
方式1: 通过data属性发送数据，同vue
方式2: 手动发送数据
// 发送数据给子应用 my-app，setData第二个参数只接受对象类型
microApp.setData('my-app', {type: '新的数据'})
回调函数同二。

forceSetData：强制发送

四、主应用获取来自子应用的数据
方式1：直接获取数据
const childData = microApp.getData(appName) // 返回子应用的data数据

方式2: 监听自定义事件 (datachange)
// 数据在事件对象的detail.data字段中，子应用每次发送数据都会触发datachange
@datachange='handleDataChange' 同vue

方式3: 绑定监听函数
同上

五、清空数据
方式一：配置项 - clear-data
// 清空主应用发送给子应用 my-app 的数据
microApp.clearData('my-app')

六、全局数据通信
发送全局数据
// setGlobalData只接受对象作为参数
microApp.setGlobalData({type: '全局数据'})，回调同上
forceSetGlobalData：强制发送

获取全局数据
const globalData = microApp.getGlobalData() // 返回全局数据

/**
* 绑定监听函数
* dataListener: 绑定函数
* autoTrigger: 在初次绑定监听函数时如果有缓存数据，是否需要主动触发一次，默认为false
*/
microApp.addGlobalDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)
// 解绑监听函数
microApp.removeGlobalDataListener(dataListener: (data: Object) => any)
// 清空主应用绑定的所有全局数据监听函数
microApp.clearGlobalDataListener()
回调同上

// 清空全局数据
microApp.clearGlobalData()

七、关闭沙箱后的通信方式
注册方式：在主应用中为子应用初始化通信对象
import { EventCenterForMicroApp } from '@micro-zoe/micro-app'
// 注意：每个子应用根据appName单独分配一个通信对象
window.eventCenterForAppxx = new EventCenterForMicroApp(appName)
// 直接获取数据
const data = window.eventCenterForAppxx.getData()
window.eventCenterForAppxx.addDataListener(dataListener: (data: Object) => any, autoTrigger?: boolean)同上