面试题

#面试题

对于各位看官老爷们来说，题目应该是非常简单的，由于个人原因，这么好的运气，也没能拿下它，属实是不应该啊，不知道下次面试有没有这么好的运气了（谁还不想当侥幸哥呢！！）

#对于token为什么存入localStorage？你是怎么考虑的？

这个可能需要介绍浏览器存储的特点吧，个人认为，所以就按照存储特点进行回答了。

1. localStorage可以实现一个持久化存储，即使浏览器关闭，它的数据也不会消失，对于需要在多个页面间保持用户登录状态的应用非常有用，且存储量大。
2. 但是存在潜在的安全风险。

#路由懒加载，具体是一个怎么样的使用方法？(主要想问路由懒加载 和 常规路由配置，它在打包/编译上有什么区别？)

它是一种优化技术，对于大型单页应用非常有用。核心思想：应用启动时只加载必要代码，非必要代码延迟加载，直到用户访问到特定页面或组件时才加载其相应的组件和脚本。

1. 它的原理就是会将首页资源拆分，懒加载前提的实现：ES6的动态地加载模块——import()
2. 代码分割：通过构建工具（如 Webpack）将应用代码分割成多个小块（chunks），每个路由对应的组件被分割成单独的 chunk。
3. 按需加载：当用户导航到某个路由时，才加载该路由所需的组件和相关脚本。
4. 异步组件：使用异步组件技术来实现按需加载，通过动态导入（import()）来实现组件的延迟加载。

看下面这个文章，作者给了使用懒加载后打包的区别。同时还有一些其他的前端性能优化考点。

前端性能优化——首页资源压缩63%、白屏时间缩短86%提升首屏的加载速度，是前端性能优化中最重要的环节，这里笔者梳理出一 - 掘金 (juejin.cn)

#lib-flexible 适配的原理？

1. lib-flexible 的核心原理在于根据设备视口的宽度来计算并设置根元素的字体大小，从而使所有基于 REM 的元素能够根据视口宽度自动缩放。

下面是使用方法： vue移动端适配之lib-flexiblelib-flexible插件,移动端适配解决方案。如果使用cube-ui来创建 - 掘金 (juejin.cn)

#Promise的基本原理

介绍：Promise是JavaScript的一种处理异步操作的模式，它主要提供了一种更加清晰的方式来处理异步流程，避免了回调地狱的问题。（它提供的方式看起来就像是在处理同步代码一样，让人更好理解）

它存在三个状态，pending（等待状态）、fulfilled（已完成）、rejected（已失败）。

一旦promise的状态变为了 fulfill / rejected 它的状态就不会再改变。

它可以通过.then来进行链式调用，然后是通过.catch来处理链式内失败的情况。

Promise还有一些静态方法，就比如很常用的Promise.all，用于等待数组内所有Promise都成功返回一个数组，如果有一个失败则立即返回失败。

#手写一个Promise.all 方法

#Event loop

这个简单，就不说了，基本的js问题一般都会被问到。

#ref 和 reactive 的本质区别

1. ref 和 reactive的区别其实不是很大，它们的区别，就是 reactive 使用了es6版本出现的Proxy代理的模式，它有很对的拦截方法，他的原理就是在对象属性读取值的时候，给他添加副作用函数，在属性被修改或删除中，去触发这个副作用函数来实现响应式效果。
2. 而 ref 它是当参数是对象时，会借助reactive代理来实现一个响应式效果，如果是参数是原始类型时，它会给值添加value函数，并使用原生的Getter和Setter方法，去实现副作用的添加和触发副作用函数的能力，通过这样的手段去实现响应式效果。

#如何设计并实现滚动加载hooks。（intersectionObserver那个hooks）

设计的话，采用的是Pinia进行的数据管理，在内容加载模块下，实现加载更多的函数，主要就是slice切割源数据，让切割后的数组内数据进行展示，在滚动加载的这个组件上绑定 ref 找到当前列表的最后一个DOM元素，使用intersectionObserver进行一个监听，当滑动到最底部时，看看是否还需要加载更多，然后选择是否执行状态库内的加载更多函数。

手动封装一个内容无限滚动的hooks，给你的项目增添技能难点前言 最近都在准备面试，好久没有写文章总结知识点了，这个点也 - 掘金 (juejin.cn)

#哪些状态需要进行全局的状态管理？

关键是要考虑该状态是否影响多个组件或页面，并且是否需要一致的状态更新机制来确保各部分之间的同步。如果状态仅在一个局部范围内使用，那么将其保持在局部状态管理中可能是更好的选择。

在项目中常见的比如：

1. 认证状态：用户的登录状态通常是全局性的，因为大多数页面和组件都会根据用户的认证状态显示不同的内容或功能。
2. 路由状态：虽然路由状态通常由路由库自己管理，但在某些情况下，如导航权限控制或面包屑导航等，可能需要将当前路由或历史路由信息作为全局状态来使用。

#组件间的通信

这个方法就很多了，我们需要去专门的了解一下：

1. defineProps
2. defineEmits
3. provide 和 inject
4. Vuex
5. pinia
6. ref
7. v-model

#在模块化标准上，CommonJS 和 ES Modules 有什么区别？

1. 语法层面（前者使用require导入/exports导出，后者使用import导入/export导出）
2. 执行机制方面（前：同步加载代码，且模块只会加载一次。后者存在import()动态加载函数，可实现异步加载，且按需加载，可加载多次，也会通过缓存机制避免重复加载）。
3. 适用的环境（CommonJS主要在服务器后端适应，ESM主要就是跨平台）
4. 兼容性：前者在nodejs中支持较多，后者适用于现代浏览器或node新版本。