2024.8.5
keep-alive的原理
- 使用 LRU 缓存机制进行缓存，max 限制缓存表的最大容量
- 根据设定的 include/exclude（如果有）进行条件匹配,决定是否缓存。不匹配,直接返回组件实例
- 根据组件 ID 和 tag 生成缓存 Key ,并在缓存对象中查找是否已缓存过该组件实例。如果存在,直接取出缓存值并更新该 key 在 this.keys 中
- 位置(更新 key 的位置是实现 LRU 置换策略的关键)
- 获取节点名称，或者根据节点 cid 等信息拼出当前 组件名称
- 获取 keep-alive 包裹着的第一个子组件对象及其组件名
过程如下：
- 声明有序集合list，存储组件的唯一标识key；
- 函数执行渲染，如果命中缓存，从有序集合list中取出组件，在list中删除key值并重新插入到队尾；
- 如果没有命中缓存，list长度已经等于max，删除队首最不常用组件的key值，并将组件key插入到list当中；
- 触发beforeMount/beforeUpdate生命周期时，缓存activated状态的组件数据和渲染状态。
超过三行省略怎么实现，刚开始的时候是三行，后面是省略号，再点击展开，变成两行
Vue更新是同步还是异步的，为什么
在 Vue.js 中，视图更新是异步的。这意味着当数据发生变化时，Vue 并不会立即更新 DOM。相反，它会等待所有的同步代码执行完毕，然后批量更新 DOM。
这种异步更新的设计有以下几个原因：
性能优化：通过异步更新，Vue 可以将多个更新操作合并成一个更新，减少了频繁操作 DOM 的次数，提升了性能。
避免不必要的更新：如果同步更新，每次数据变化都会立即触发 DOM 更新，这可能会导致过多的重复渲染。异步更新可以确保只在下一个事件循环中进行一次更新，避免不必要的重复操作。
保证内部一致性：Vue 的响应式系统依赖于依赖追踪和更新队列，异步更新确保了在更新前所有数据变化已经被捕获和处理，从而保证了数据和视图的一致性。
fiber出现前后的差别
React 中的 Fiber 是 React 16 引入的新的协调引擎，它主要改变了 React 内部的调度和更新机制，带来了一些重要的改进和优化。
主要差别和改进：
增量更新： Fiber 使用了增量更新的方式，可以在渲染过程中中断、优先级调整和恢复更新。这意味着 React 可以根据优先级动态地调整更新的顺序，使得页面的响应性更好。
异步渲染： Fiber 允许 React 在多个帧中分割渲染工作，以避免阻塞浏览器渲染线程。这样可以提高用户界面的流畅度和响应速度，特别是在处理大型和复杂的组件树时。
新的调度优先级： Fiber 引入了不同的任务优先级概念，允许 React 根据任务的重要性和紧急程度来调度更新。例如，可以优先处理用户交互相关的更新，而延迟处理较低优先级的更新，从而提升用户体验。
更好的错误边界处理： Fiber 改进了错误边界的行为，使得 React 能够更好地捕获和处理组件渲染过程中的错误，避免整个组件树的崩溃。
更好的可扩展性： Fiber 的架构更灵活，更易于扩展和实现新的特性。这使得 React 团队能够更快地推出新功能，并且更容易与现有的生态系统集成。
总体来说，React Fiber 的出现使得 React 的内部实现更加高效和灵活，提升了应用程序的性能和用户体验，特别是在处理大规模和动态数据变化的应用程序时效果更为显著。
echart的按需导入方式
webpack和vite的区别
vite生产模式遇到的坑
第三方库的兼容性：
问题：某些第三方库可能不完全兼容Vite的ES Module导入方式或优化特性，导致在生产环境中出现问题。
解决方法：可以考虑以下解决方案：
查看第三方库的最新版本，确保它们支持ES Module的导入方式。
尝试手动配置Vite的一些选项，如optimizeDeps，来处理特定库的导入问题。
在Vite社区或GitHub上查找是否有其他用户遇到相似问题，并寻找可能的解决方案或补丁
错误监控的方法
js、css、图片、网络IO等报错，用window.onerror、window.addEventListener('error')
promise报错，用window.onunhandledrejection、window.addEventListener('unhandledrejection')
Vue报错，用vue.config.errorHandler