70场面试，复盘我遇到的有趣问题（五）

今天来复盘一下京东二面，京东二面是我秋招过程中收获最大的一场面试，感觉这场面试就可以出两期了，二面完整面经：https://www.nowcoder.com/feed/main/detail/18cb2c4275544c79af169aa92d2c3fd1?sourceSSR=users

今天挑几个问题讲讲，明天写工程化相关的几个问题。

1.react的hooks和vue的组合式api有些共同之处，是希望达到什么效果（这个问题很好！）

先摆出一篇非常好的文章：https://zhuanlan.zhihu.com/p/470039190，这篇文章很详细的对比了vue和react的hook以及react hooks和组合式api。

再来看这个问题，react的hooks和vue的组合式api，二者共同之处就在于都使用了hooks（什么？vue里也有hooks？没错）。那么这个问题其实是说，为什么二者都使用了hooks，能带来哪些好处？

首先hooks在react和vue里的定义有些不一样。react中：一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class 式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。vue中：在 vue 组合式API里，以 “use” 作为开头的，一系列提供了组件复用、状态管理等开发能力的方法。其中，二者的以use作为开头是弱约束。很相似，但确实也不一样。事实上vue组合式api中常用的一些方法（如ref，onMounted等）都是hooks。

那么为什么都使用了hooks？分别来看一下。

在react中使用hooks只能在函数组件中使用，并且是函数组件顶层，且不能在条件中使用。好处有两点：

1.比class组件更容易理解。使用react hooks可以完美的替代class组件中的生命周期钩子，并且最大的好处是避免了复杂的this指向和绑定问题（我自己没咋写过class组件，但是看代码的时候已经觉得头疼了）。

2.第二点好处是一种渐进式过渡的过程，hooks的产生并不是break change，并不强求你一定要完全转变成函数组件，你依然可以一边写类组件一边写函数组件，完全无痛。

在vue的组合式api中使用作用也很大。好处也列举两个：

1.最大的好处就是有更好的状态复用。在出现hooks之前，状态复用最好的解决方案应该式mixin（来背八股，mixin的作用和缺点）。但是mixin的缺点也很多，比如属性难以溯源，假设打印了个this.a，引入了七八个mixin，如何溯源？一个个看？再比如两个mixin中都定义了a属性，使用this.a的时候到底用的是哪个？虽然方便，但是一定程度上带来了维护成本。而hooks就可以很好的避免这些问题：

好溯源，来自哪里一目了然；不会冲突，用as重命名避免了；多次复用hooks的时候也没问题。

2.代码组织更清晰。在选项型api的情况下，data、methods都写在一块，业务逻辑组织性不强（虽然结构清晰）。而使用hooks可以很好的组织代码结构，如下图

上面这些就是这个题的答案了，但本质上看完这些应该对hooks和选项型api的理解更上一层楼了，二者也能联系起来对比，属实学到了很多。

2.vue2到vue3为什么要从选项型api变成组合式api？

这个问题在上面也有回答：1.逻辑组织性更强。2.方便状态复用。下面直接摆出一个对比表格：

3.如果使用iframe作为微前端框架，会出现什么问题？

iframe是可以用于微前端的，WUJIE就用到了iframe。微前端框架很重要的一步就是实现样式隔离、js 隔离，而对于iframe来讲，它具有先天优势，其最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决，这是iframe可以作为微前端方案的原因。

但iframe也存在很大的弊端，使得其作为微前端方案使用起来比较麻烦。

1.url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。当使用iFrame嵌入内容时，浏览器会默认缓存iFrame加载的页面。这意味着当嵌入的页面内容发生更新时，浏览器可能仍然展示旧内容，而不是新内容。这是因为浏览器认为嵌入的页面没有发生变化，因此加载缓存中的旧版本。解决iFrame缓存问题的一种常用方法是通过在iFrame的URL中添加随机参数来强制浏览器重新加载内容。这样，每次加载iFrame时，URL都会不同，浏览器会认为内容发生了变化，从而加载最新的内容。

2.UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示。对于这个问题，解决起来确实比较麻烦，需要实现子应用与基座之间的通讯，将其实现交由基座来实现，这样子基座的耦合性较为严重。

3.全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。子应用需要和基座共享cookie的话，条件还是比较苛刻的，需要主域名一致

iframe 通信（使用postMessage，子应用发，主应用addeventListener接受）。iframe实现通信是很重要的一环，子应用和主应用都需要，每个项目都需要使用到的，建议可以独立封装成一个npm包，当然，如果使用webpack5，也可以直接使用模块联邦，来实现共享，对于通信，还是需要规定好规则，这样子比较好维护，接下来是通讯部分代码的具体实现。

4.慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

4.模块联邦这种微前端方案了解过吗？

当时是没了解的，下面跟大伙一起了解一下。

Webpack模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。模块联邦允许不同的Web应用程序（或微前端应用）在运行时动态共享代码，无需传统的打包或发布过程中的物理共享（这么牛）。这意味着每个微应用可以独立开发、构建和部署，同时还能轻松地共享组件、库甚至是业务逻辑。

有两个基础概念：