Iframe在Vue中的状态保持技术
💡
原文中文，约6100字，阅读约需15分钟。
📝
内容提要
本文介绍了Iframe元素的定义和优点，以及在多开窗口场景下如何实现状态保持和资源管控。同时，探讨了Vue Patch机制的运行原理，并提出了解决方案。最终，通过更改竞争机制，保证了多开窗口在Vue中的状态保持。
🎯
关键要点
- Iframe是HTML内联框架元素，能够嵌入另一个HTML页面，具有高兼容性和内容隔离等优点。
- 在多开窗口场景下，使用Iframe的CSS Display特性可以实现状态保持，避免重新加载。
- 引入资源池和竞争机制来管理多个Iframe，限制并发请求数量以提高页面性能。
- 在Vue中，组件状态保持依赖于key属性，Iframe组件已正确分配唯一Uid。
- Vue的Diff Patch机制通过比较新旧Vnode来更新组件，使用指针向中间聚拢递归实现数据对比。
- Iframe的状态刷新机制在执行insertBefore时会导致状态刷新，需优化DOM操作。
- 最终解决方案是更改淘汰机制，保证多开窗口在Vue中的状态保持。
➡️
