--- theme: smartblue --- ## 前言从三月刚开始就疯狂的海投简历，到最后顺利拿下某中厂的日常实习OC，中间还是遇见了很多的坎坷，这里来按照不同的公司来记录一下我的前端面试经历吧 ## 知乎 > 这是我最后悔的一场面试，不是因为别的，就是因为我没有准备充分，错过了我这个很喜欢的公司由于是第一次面试，所以紧张的不行，不过面试官人真的很好，一直笑眯眯的鼓励我继续说下去，作为所有面试的开头，这场面试让我对后面的面试更加有信心和好奇了 ### CSS部分 - 常用的选择器有哪些？(我是傻逼，太紧张了乱说一通) > 常用的选择器包括标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器和属性选择器等 - 权重 > CSS的权重是指在样式冲突时，某一条样式被应用的优先级。权重值的计算方式是根据选择器的类型和数量来确定的。选择器的权重值从高到低为：`!important > 行内样式 > ID选择器 > 类选择器、属性选择器和伪类选择器 > 标签选择器和伪元素选择器`。具体来说，ID选择器的权重值为100，类选择器、属性选择器和伪类选择器的权重值为10，标签选择器和伪元素选择器的权重值为1。在样式冲突时，权重值高的样式会覆盖权重值低的样式。 - 比如我想隐藏一个元素应该怎么办呢？这里我回答了visibility和display，还自作聪明的说了z-index，自己给自己挖了坑 > 0. 使用`display`属性：设置元素的display属性为none，这样元素在页面上不会占用任何空间，同时也不会对其他元素产生影响。 > 0. 使用`visibility`属性：设置元素的visibility属性为hidden，这样元素在页面上不可见，但仍然占用空间。 > 0. 使用`opacity`属性：设置元素的opacity属性为0，这样元素在页面上不可见，但仍然占用空间。 > 0. 使用`position`属性：将元素的position属性设置为absolute或fixed，然后将元素移动到屏幕外或者使其超出容器的范围之外，这样元素在页面上不可见，但仍然占用空间。 > 0. 使用`z-index`属性：将元素的z-index属性设置为负值，这样元素在页面上不可见，但仍然占用空间。 > 0. 使用`clip`属性：将元素的clip属性设置为一个矩形区域，这样元素只会显示矩形区域内的部分，其余部分会被裁剪掉。 - 接着上面的继续问，比如我想要一个元素，既不会被移除，但又要被隐藏(这里我回答的是visibility，但面试官不满意，让我想想其他的方法) 最后说的方法是将其移除视窗外，或者直接缩小到不可见(这个方法确实出乎我的意料) > 使用`position`属性：将元素的position属性设置为absolute或fixed，然后将元素移动到屏幕外或者使其超出容器的范围之外，这样元素在页面上不可见，但仍然占用空间。 - css当中如果出现了两个一样的类定义，你如何避免冲突(有点太紧张了，就说的是scoped进行样式隔离，然后又按照自己的记忆随便回答了个外部引入的方式，结果把面试官弄笑了，唉) > 0. 优先级：CSS中每个选择器都有一个优先级，可以通过优先级来确定哪个样式定义将被应用。如果两个类定义中的样式相冲突，可以通过调整优先级来解决冲突。 > 0. 父元素选择器：可以使用父元素选择器来限定样式的范围，从而避免冲突。比如，如果两个类定义中的样式都应用到某个父元素的不同子元素上，可以使用父元素选择器来限定样式的范围，从而避免冲突。 > 0. 命名空间：可以使用命名空间来区分不同模块或组件的样式定义，从而避免冲突。比如，可以为不同模块或组件的类定义添加不同的命名空间前缀，从而将它们区分开来。 > 0. scoped样式：可以使用scoped样式来将样式限定在特定的组件或模块中，从而避免与其他组件或模块的样式冲突。scoped样式是一种Vue框架提供的特殊样式，可以通过在style标签中添加scoped属性来实现。后面的有点记不清楚了 ### JavaScript部分 - 问我基本数据类型和引用数据类型(这里大意了，说的很快，可能没说全面。。。) > - 基本数据类型：Undefined null Boolean number string > - 引用数据类型：object array function - 问我es6里的新引入的东西，这里面试官想让我说map forEach，我说了箭头函数那些，他就鼓励我继续说下去，结果大脑当机了没想到这些 - 问我map和forEach的区别，我又乱回答了一通，js基础真的太差了我，唉 > `map()`和`forEach()`都是JavaScript数组对象的方法，用于遍历数组。它们的区别在于返回值和使用方式。 > > `forEach()`方法会对数组的每个元素执行一次回调函数，没有返回值，仅仅是遍历数组。 > > ``` > arr = [1, 2, 3, 4]; > arr.forEach((num) => { > console.log(num * 2); > }); > // 输出2 4 6 8 > ``` > > `map()`方法会对数组的每个元素执行一次回调函数，并将回调函数的返回值组成一个新的数组返回，不会修改原数组。 > > ``` > arr = [1, 2, 3, 4]; > const newArr = arr.map((num) => { > return num * 2; > }); > console.log(newArr); // 输出[2, 4, 6, 8] > ``` > > 因此，如果我们想对数组进行遍历并执行一些操作，可以使用`forEach()`方法；如果我们需要在遍历数组的同时生成一个新的数组，可以使用`map()`方法。记不清楚了后面，反正回答的有点差 ### Vue部分 - 面试官本身是react的，不是很清楚vue，就让我介绍vue，我就说了Vue的一些特点和react的区别之类的 - 然后问我Vue双向绑定之类的，我就又讲了一些底层的东西 - 问我接触过react没，我回答没😢 ### 项目部分 > 我这次能拿到这个面试完全看的是组件库的项目，面试官似乎对我组件库的项目很感兴趣 - 就说为什么我的button按钮那里不进行一个直接的映射，而是还需要进行调用颜色，我说这部分实现遇见了bug - 项目的组件还是太少了 - 用过git吗？给我介绍一下，我就开始介绍了，又给自己挖了坑，提到了git merge，然后问我如何切换分支，我说不会，只能硬着头皮说自己项目没分支，面试官看上去很惊讶😢 ### 手撕js部分没有我背的八股js，直接哭死 > 实现了将一个由键值对对象组成的数组转换成一个键为对象中key属性值、值为value属性值的对象 ``` function change(arr) { return arr.reduce((pre, { key, value }) => { pre[key] = value; return pre }, {}) } let a = change([{ key: 'a', value: '1' }, { key: 'b', value: '2' }]) console.log(a) ``` 我直接不会，然后面试官教我怎么实现 ### 反问我第一次面试，所以我感觉很烂，您觉得怎么样呢，还有后续吗？ - 我感觉还行，但你的js部分可能还不是很好🥹😭感觉很阳光开朗知乎的技术栈是什么呢？ - 大部分是react，有一些是Vue 请问你们的组件是直接用现成的还是自己弄呢？ - b端的话会自己弄，c端需要很多自己定义样式的地方，大都手搓好的，没有了，谢谢您 - 好的 ### 总结自己太紧张了，很多地方发挥的很失败，面试没准备好，在面试的时候我才在搭建环境，自己的js基础太差了，git命令也很差，需要恶补一下，知乎的寄了，接下来加油吧 ## 扁鹊健康 > 第二场面试，八股文基本上全答出来了，结果反手删我微信给我挂了😓 第二次面试很明显比第一次好多了，没有那么紧张，情绪也没有失控，可能是没开视频的原因？感觉面试的时候还是得尽量严肃一点吧，控制好自己的情绪和面部表情才能够更好的回答问题，在面试前让自己冷静下来，像对待考试一样去对待每一场面试面试官迟到了6分钟的样子电话面试本以为只会面试10分钟，结果面试了半小时之前看牛客上的面经，以为是很简单的那种，结果大意了，把我简历扒拉干净了的感觉一上来还是自我介绍 ### 数据结构一上来就进行数据结构的拷打呜呜，我数据结构很烂诶 - 有哪些排序的方法？ > 0. Array.prototype.sort()：该方法可以对数组进行原地排序，即直接修改原数组，不会返回新的数组。默认情况下，它会将数组元素转换为字符串，然后按照Unicode码点排序。如果需要按照其他方式排序，可以传入一个比较函数作为参数。 > 0. Array.prototype.reverse()：该方法可以将数组中的元素按照相反的顺序重新排列，并返回新的数组。 > 0. 冒泡排序（Bubble Sort）：这是一种简单的排序算法，它重复地遍历要排序的数组，比较相邻的元素并交换位置，直到整个数组都已经排序。 > 0. 快速排序（Quick Sort）：这是一种快速的排序算法，它的基本思想是选择一个基准元素，然后将数组中的元素分为小于基准元素和大于基准元素的两部分，再对这两部分分别进行排序。 > 0. 插入排序（Insertion Sort）：这是一种简单的排序算法，它将数组分为已排序和未排序两部分，然后将未排序部分的第一个元素插入到已排序部分的正确位置上。 > 0. 选择排序（Selection Sort）：这是一种简单的排序算法，它将数组分为已排序和未排序两部分，然后从未排序部分选择最小的元素并放到已排序部分的末尾。 > 0. 归并排序（Merge Sort）：这是一种分治的排序算法，它将数组分成两个子数组，分别对这两个子数组进行排序，然后将排序后的子数组合并成一个有序的数组 - 我说了快排和冒泡排序后问我快排的时间复杂度 > 快速排序的平均时间复杂度为 O(nlogn)。具体来说，当待排序数组的划分比较平均时，快速排序的时间复杂度是最优的。而当待排序数组已经有序或接近有序时，快速排序的时间复杂度会退化为 O(n^2)。 > 快速排序的时间复杂度分析如下： > > - 每次划分操作需要对整个数组进行一次遍历，时间复杂度为 O(n)； > - 快速排序的递归树的深度为 logn，因为每次划分都会将数组一分为二，所以深度为 logn； > - 每次划分的时间复杂度为 O(n)，因此快速排序的总时间复杂度为 O(nlogn)。 > > 需要注意的是，快速排序的最坏时间复杂度为 O(n^2)，但这种情况很少出现，通常情况下快速排序的时间复杂度为 O(nlogn)，是一种高效的排序算法。 - 我说了有两种情况，然后追问我如何对快排进行优化(这里没回答好) > JavaScript 中，可以使用以下技巧来优化快速排序算法： > > 0. 三数取中：在选择基准元素时，使用数组中间、头部和尾部的三个元素的中位数作为基准元素。这可以降低最坏情况的出现概率。 > 0. 插入排序：在数组的长度小于某个值（如10）时，使用插入排序算法而不是快速排序。插入排序在处理小数组时比快速排序更快。 > 0. 随机化数组：在每次执行快速排序时，随机打乱数组，以增加算法的随机性。 > 0. 尾递归优化：使用尾递归优化快速排序的实现，避免栈溢出。 - 问我快排最差的情况是什么 > 最差情况是每次选取的基准元素都是当前子数组中最大或最小的元素。在这种情况下，每次划分都只能排除一个元素，因此需要进行 n 次划分才能完成排序，时间复杂度为 O(n^2)。这种情况发生的概率非常低，但是如果数据本身就是有序的，或者是基本有序的，快排容易陷入最差情况。后面突然问我计算机组成原理了解吗？把我吓到了，连忙说之前学过，但没怎么了解 ### CSS CSS问题我记得不是很清楚了**下次面试一定要录音！** - CSS盒模型 - 出了个场景题，说content大小为100px，border为100px，问此时怪异盒模型的宽高（这里我电话没听太清楚，好像是说我出了问题了，但我下来一看感觉是面试官说错了(・∀・(・∀・(・∀・*)） ### js - es6新特性 - 箭头函数和普通函数区别 > 0. 语法不同：箭头函数使用箭头符号（`=>`）来定义函数，而普通函数使用关键字 `function` 来定义。 > 0. `this` 的指向不同：箭头函数没有自己的 `this`，它会继承父级作用域中的 `this` 值。而普通函数中的 `this` 则是在函数被调用时动态确定的，它的值取决于调用函数的方式。 > 0. 无法使用 `arguments` 对象：箭头函数没有自己的 `arguments` 对象，因此在箭头函数中使用 `arguments` 会引用外部作用域的 `arguments`。 > 0. 不能用作构造函数：箭头函数不能使用 `new` 关键字来创建实例，因为它们没有自己的 `this`，也没有原型对象。 > 0. 没有原型：箭头函数没有 `prototype` 属性，因此不能通过它来定义方法。 > 0. 没有自己的 `arguments`, `super`, `new.target` 对象：箭头函数没有自己的 `arguments`, `super`, `new.target` 对象，它们都是从外部继承的。 - Promise - Promise的参数有哪些 > Promise 构造函数的参数为一个函数，这个函数接收两个参数：resolve 和 reject，它们分别表示 Promise 对象的两种状态：已解决（fulfilled）和已拒绝（rejected） - Promise.all了解吗 - Promise.all的使用场景 > 0. 多个异步操作并行执行，且需要等待所有操作完成后进行下一步处理，比如从多个 API 接口获取数据，然后将所有数据合并到一起再进行渲染 > 0. 多个异步操作中有一个操作失败就立即停止所有操作，并执行错误处理逻辑 - 数据类型，基本数据类型和引用数据类型 - symbol了解吗说说他的使用场景 > 定义对象的私有属性：Symbol 值作为属性名是唯一的，可以防止属性名的冲突，因此可以用来定义对象的私有属性 > > 防止对象属性被意外修改：由于 Symbol 值是唯一的，因此可以用来定义对象属性，防止属性被意外修改 > > 定义常量：由于 Symbol 值是唯一的，因此可以用来定义常量 > > 定义枚举：由于 Symbol 值是唯一的，因此可以用来定义枚举 ### 计算机网络 - 说说http和https的区别 > 0. 安全性：HTTP 传输的数据是明文的，容易被窃取和篡改，而 HTTPS 使用 SSL/TLS 加密传输数据，可以保证数据的机密性和完整性，防止数据被窃取和篡改 > 0. 端口号：HTTP 默认使用端口号 80，而 HTTPS 默认使用端口号 443 > 0. 证书：HTTPS 使用 SSL/TLS 协议对传输数据进行加密，需要使用证书对网站进行身份验证，防止中间人攻击。HTTP 不需要证书进行身份验证 > 0. 速度：由于 HTTPS 使用 SSL/TLS 加密传输数据，会增加传输数据的时间和带宽消耗，因此速度比 HTTP 慢一些 > 0. 缓存：HTTP 可以使用浏览器缓存来提高访问速度，而 HTTPS 在加密传输数据时会禁止浏览器缓存，以保证数据的安全性 - 说说http状态码 - 了解https数据传输的过程吗？(没太回答上来) > 0. 客户端向服务器发起 HTTPS 请求，请求中包含了 SSL/TLS 支持的信息，比如支持的 SSL/TLS 版本号、加密算法等。 > 0. 服务器返回证书给客户端，证书中包含了服务器的公钥、服务器的身份信息和证书的有效期等。 > 0. 客户端验证服务器的身份，包括验证证书的有效性、证书是否过期、证书中的域名与服务器的域名是否一致等。 > 0. 如果证书验证通过，客户端生成一个随机的加密密钥，并使用服务器的公钥进行加密，然后发送给服务器。 > 0. 服务器使用私钥解密客户端发来的密钥，然后生成一个随机数作为会话密钥，并将会话密钥加密后发送给客户端。 > 0. 客户端和服务器使用会话密钥进行数据传输，客户端和服务器之间的所有数据都使用会话密钥进行加密和解密，保证数据的机密性和完整性 ### 项目移动端媒体项目： - 你这个项目为什么不用vuex而是pinia呢？说说二者的区别吧 - 你这个token持久化是怎么实现的？(乱编了我就) - 除了pinia那个方法还有什么呢？我说了session - session关掉后就没有了哦，还有吗？(答案是localstorage) 组件库项目： - 为什么想到做个组件库的项目呢？ - 你是如何实现组件库的封装呢？(这里回答defineComputed 然后讲我是如何写的组件就行) - 说一下常用的git命令吧 - 经典问题之git merge和git rebase的区别 > `git merge` 命令会生成一个新的合并提交，并且会保留原来的分支历史记录，合并后的提交包含两个分支的修改。而 `git rebase` 命令则是将当前分支的修改应用到目标分支上，重新生成一颗新的分支历史记录，使得分支历史记录更加线性化 - vite和webpack的区别 > 0. 构建方式不同：Vite 利用 ES Modules 的特性进行构建，每个文件都是一个独立的模块，开发过程中只需要编译修改的文件，不需要每次都编译整个项目；而 Webpack 采用静态分析的方式进行构建，需要分析整个项目中的依赖关系，每次修改后需要重新编译整个项目。 > 0. 开发体验不同：Vite 支持快速的热更新和即时预览，开发者可以在修改代码的同时，立即在浏览器中查看到最新效果；而 Webpack 需要重新编译后才能查看最新效果。 > 0. 对 Vue 的支持：Vite 是 Vue.js 官方推荐的开发工具，内置了对 Vue 单文件组件的支持，可以直接在浏览器中运行 Vue 组件；而 Webpack 需要通过插件等方式进行支持。 > 0. 总体来说，Vite 更适合于轻量级的应用，对于 Vue 单文件组件的支持更加完善，而 Webpack 则更适合于复杂的应用，可以通过插件等方式进行更加灵活的配置 > 0. vite支持热重载热重载（Hot Reload）是指在应用程序运行时对代码进行修改，而无需重新启动应用程序或重新加载整个页面，即可使更改的部分立即生效并反映在应用程序中。热重载可以帮助开发人员更快地调试和开发应用程序，同时减少开发周期还有一些我就忘记了哈哈 ### 反问 - 公司技术栈？ react 少部分是vue2 - 多久出结果一周内吧感觉还算是很不错的面试，基本上都回答出来了，不过这个是阿里的外包公司，一半员工都是阿里过去的，看了一下公司规模很小，估计也没hc让我进去，就当一次电话面试的体验了，加油! ## 即刻app > 很热情的一个面试官！反问环节最有意思的一家，不过难度也算最高的一家这是我目前面过的公司里难度感觉最高的一家了，不是常规的那种八股文直接硬背，而是真的结合实际的场景进行出题的，对于一个技术栈的考察的深度很深，是一个很不错的面试官首先第一点给我感觉不一样的就是，没有自我介绍！上来就直接发了个链接，可能是打算结合实际代码来对我进行考察，可惜这里失败了(学校的网真的差。。。) ### ref和reactive的区别 ref是一个函数，它可以将一个普通数据类型（如数字、字符串等）转换为一个响应式对象，从而让这个数据在Vue的响应式系统中被追踪。ref返回一个对象，这个对象有一个.value属性，用来获取和设置这个响应式对象的值 ``` import { ref } from 'vue'; const count = ref(0); console.log(count.value); // 0 count.value = 1; console.log(count.value); // 1 ``` 而reactive则是一个函数，它可以将一个普通的Javascript对象转换为一个响应式对象。它会递归地将这个对象的所有属性都转换为响应式对象，从而让整个对象在Vue的响应式系统中被追踪。reactive返回一个Proxy对象，用来代理原始对象的访问和修改 ``` import { reactive } from 'vue'; const state = reactive({ count: 0, message: 'hello' }); console.log(state.count); // 0 console.log(state.message); // 'hello' state.count = 1; state.message = 'world'; console.log(state.count); // 1 console.log(state.message); // 'world' ``` 因此，ref主要用于创建一个单一的响应式数据，而reactive则适用于创建一个复杂的、包含多个属性的响应式数据对象 ### ref可以大量的替换成reactive吗不能直接把ref替换成reactive。 ref主要用于将基本数据类型（如字符串、数字等）转换为响应式数据，并提供一个.value属性用于访问和修改该数据。而reactive则用于将一个普通的JavaScript对象转换为响应式对象，并使用Proxy来拦截对该对象的访问和修改，以实现响应式更新。因此，如果你需要使用响应式数据来存储基本数据类型，或者你只需要响应式地跟踪一个值的变化，那么ref仍然是更合适的选择。而如果你需要管理一个对象的多个属性，并希望这些属性可以响应式地更新，那么reactive会更加合适 ### 为什么vue和react都去选择自己实现一个路由，是出于什么目的呢 0. 更好地集成到框架中：由于路由是前端应用中必不可少的一部分，因此框架集成路由功能可以提供更好的用户体验和开发效率。通过自己实现路由库，Vue和React可以将路由功能无缝集成到框架中，提供更好的开发体验和更高的开发效率。 0. 更好地控制代码和依赖：Vue和React自己实现的路由库可以更好地控制代码和依赖。如果使用第三方路由库，可能会增加代码的复杂性和依赖关系，而自己实现路由库可以避免这些问题。 0. 更好地满足框架的需求：Vue和React的路由库可以更好地满足框架的需求。由于框架本身的特性和设计思想，可能需要特定的路由实现方式来满足这些需求。通过自己实现路由库，可以更好地满足框架的需求，提供更好的开发体验和更高的性能。 0. 更好地控制性能：Vue和React的路由库可以更好地控制性能。由于路由是前端应用中的关键部分，性能往往是一个重要的考虑因素。通过自己实现路由库，Vue和React可以更好地控制路由的性能，从而提供更好的用户体验和更高的性能 > 总之，Vue和React都实现了自己的路由库，主要是为了更好地集成到框架中，更好地控制代码和依赖，更好地满足框架的需求，以及更好地控制性能 ### 浏览器自己本身就有路由，为什么不直接用a标签进行一个跳转，而是选择用router来进行一个跳转呢浏览器本身的路由是基于URL的，即每个页面都有一个唯一的URL地址。使用浏览器本身的路由，需要在URL中手动编写参数，处理页面刷新和前进/后退等操作的逻辑，这样会使得代码复杂性增加，并且不太方便维护。而使用router库可以将路由相关的逻辑抽象出来，让开发者可以更加方便地处理页面跳转和传递参数等操作。使用router可以实现单页应用（SPA），使得用户在应用中的操作更流畅，且无需每次跳转都重新加载整个页面。此外，使用router还可以提供一些额外的功能，如路由守卫、动态路由等，这些功能可以帮助开发者更好地控制路由的行为，提高应用的性能和安全性 > 虽然浏览器本身也有路由，但使用router库可以提供更好的开发体验和更丰富的功能，使得应用的开发更加方便、高效和可维护 ### 浏览器为什么支持单页面路由呢？参考链接：浏览器支持单页面路由的一个重要原因是`History` API。在传统的多页面应用中，页面之间的跳转通过超链接或表单提交等方式实现，每个页面都有一个唯一的URL地址。而在单页面应用中，页面的跳转是通过JavaScript代码控制，使用history API可以更加方便地实现这种页面切换逻辑。 history API是HTML5规范中新增的一组API，可以让开发者更加方便地操作浏览器的历史记录。通过history API，开发者可以在不重新加载整个页面的情况下，改变浏览器的URL地址，添加或修改历史记录，以及监听历史记录的变化等操作。在单页面应用中，开发者可以使用history API来实现前端路由，即在不重新加载整个页面的情况下，通过改变URL地址，实现不同页面之间的切换。这样可以提高应用程序的性能，并且使得应用程序更具交互性和动态性 ### 当我们在使用history进行导航的时候，我们的页面真的进行了一个切换吗？是怎么做到的呢当我们使用history进行导航时，实际上并没有进行页面的刷新或重新加载。相反，浏览器仅仅是通过修改URL地址和浏览器历史记录，模拟了一个页面的切换效果。具体来说，使用history进行导航时，我们通常会调用history.pushState或history.replaceState方法，这些方法可以向浏览器历史记录中添加或修改一个记录，并且同时修改当前URL地址。然后，浏览器会根据新的URL地址重新渲染页面，并且在浏览器的历史记录中添加或修改一个记录。当我们使用history进行导航时，虽然页面并没有进行刷新或重新加载，但是浏览器会触发一些相关的事件，如popstate事件，用来处理导航过程中的一些逻辑。开发者可以在这些事件中添加相关的处理逻辑，从而实现前端路由的功能 ### vue如何监听路由的变化呢？在Vue中，可以使用Vue Router提供的导航守卫（Navigation Guards）来监听路由的变化。导航守卫是Vue Router提供的一组钩子函数，可以在路由发生变化时被触发。通过使用导航守卫，开发者可以实现一些常见的路由控制逻辑，如路由权限控制、路由拦截、路由跳转前的确认等等。 Vue Router提供了三种类型的导航守卫： 0. 全局守卫：在整个应用程序中，所有的路由变化都会触发这些守卫。可以通过Vue Router实例的beforeEach、beforeResolve和afterEach方法来注册全局守卫。 0. 路由独享守卫：在某个路由上，只有该路由变化时才会触发这些守卫。可以在路由配置对象中通过beforeEnter属性来注册路由独享守卫。 0. 组件内守卫：在某个路由对应的组件中，可以通过Vue组件生命周期钩子函数来监听路由的变化，实现一些组件内部的路由控制逻辑。以下是一个使用全局守卫来监听路由变化的示例： ``` import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const router = new VueRouter({ routes: [ { path: '/', component: Home }, { path: '/about', component: About } ] }) router.beforeEach((to, from, next) => { console.log('路由变化：', from.path, ' => ', to.path) next() }) ``` 在上面的示例中，我们通过Vue Router实例的beforeEach方法注册了一个全局守卫，在每次路由变化时都会触发这个守卫，并且打印出路由变化的信息。可以根据实际需求，编写自己的路由守卫逻辑 ### 原生js如何进行监听路由的变化在原生 JavaScript 中，可以使用 `window.onpopstate` 事件来监听路由的变化。当用户在浏览器中进行前进或后退操作时，或者通过 JavaScript 调用 `history.pushState()` 或 `history.replaceState()` 方法时，都会触发 `window.onpopstate` 事件。可以通过如下代码来监听 `window.onpopstate` 事件： ``` window.onpopstate = function(event) { console.log("当前路由：", window.location.pathname); }; ``` 在上面的代码中，当用户在浏览器中进行前进或后退操作时，或者通过 JavaScript 调用 `history.pushState()` 或 `history.replaceState()` 方法时，会触发 `window.onpopstate` 事件，并输出当前路由路径到控制台。需要注意的是，这种方式只能监听浏览器历史记录中的路由变化，对于通过 AJAX 或其他方式进行的路由变化是无法监听的。如果需要监听所有的路由变化，可以考虑使用一些现有的路由库，如 React Router、Vue Router 等 ### 没有hash的路由如何进行监听如果你使用的是 HTML5 History API 来管理路由，而不是 hash 路由，那么可以通过监听 `popstate` 事件来实现路由变化的监听。 HTML5 History API 可以让我们使用 `pushState()` 和 `replaceState()` 方法来操作浏览器的历史记录，并可以修改当前页面的 URL，而不会导致页面的刷新。当通过 `pushState()` 或 `replaceState()` 方法修改浏览器历史记录时，会触发 `popstate` 事件。我们可以通过监听这个事件来获取路由的变化。例如，我们可以使用如下代码来监听路由的变化： ``` window.addEventListener('popstate', function(event) { console.log("当前路由：", window.location.pathname); }); ``` 在上面的代码中，当用户通过浏览器前进或后退按钮，或者通过 `pushState()` 或 `replaceState()` 方法修改浏览器历史记录时，会触发 `popstate` 事件，并输出当前路由路径到控制台 ### onpopstate可以监听到一个pushstate的事件吗 > 这里回答错了，我说的是可以进行监听的，面试官让我回去再好好看看 `onpopstate` 事件只能监听到由浏览器触发的历史记录变化，例如点击浏览器的前进或后退按钮，或者调用 `history.back()` 或 `history.forward()` 方法。如果你在 JavaScript 中调用 `history.pushState()` 或 `history.replaceState()` 方法来修改浏览器的历史记录，那么不会触发 `onpopstate` 事件。但是，调用这两个方法会添加新的历史记录，并且可以在历史记录中回退和前进，这些历史记录变化会触发 `onpopstate` 事件。因此，如果你想要在调用 `pushState()` 或 `replaceState()` 方法后立即获取路由变化，可以在调用这两个方法后手动触发 `popstate` 事件，例如 ``` history.pushState({}, '', '/new-path'); window.dispatchEvent(new PopStateEvent('popstate')); ``` 在上面的代码中，我们先调用 `pushState()` 方法来修改浏览器的历史记录，并修改当前页面的 URL 为 `/new-path`。然后，手动触发 `popstate` 事件，这会立即触发绑定在 `window.onpopstate` 上的事件处理函数，并获取到新的路由信息 ### ts泛型的作用，在开发当中最常用在哪里 TypeScript 中的泛型（generics）是一种用于在编译时期处理类型的工具。泛型可以让我们编写更通用、更可重用的代码。泛型最常用的场景之一是在函数和类中使用。通过使用泛型，我们可以编写可重用的函数或类，可以支持多种不同类型的参数或属性。例如，下面是一个使用泛型的函数示例 ``` function reverse(list: T[]): T[] { return list.reverse(); } let numbers = [1, 2, 3, 4]; let reversedNumbers = reverse(numbers); let letters = ['a', 'b', 'c']; let reversedLetters = reverse(letters); ``` 在上面的代码中，我们定义了一个名为 `reverse` 的函数，它使用了一个类型参数 `T`。我们可以将 `reverse` 函数应用于任何具有 `reverse` 方法的数组类型。在调用 `reverse` 函数时，我们将一个类型为 `T[]` 的数组作为参数传递，并返回一个类型为 `T[]` 的数组。除了函数和类，泛型还可以应用于 TypeScript 中的其它特性，例如接口、类型别名等在开发中，我们最常使用泛型的场景是编写通用的数据结构、算法和函数，例如列表、树、排序算法、搜索算法等等。泛型可以让我们编写更通用、更可重用的代码，并且可以提高代码的灵活性和可扩展性。同时，使用泛型还可以让我们在编译时期发现类型错误，避免一些潜在的运行时错误 ### axios二次封装的好处通过对 `axios` 进行二次封装，我们可以实现以下功能： 0. 统一处理请求参数和响应数据格式：我们可以对请求参数和响应数据进行预处理或格式化，以便在多个请求中使用相同的格式。 0. 统一处理错误信息：我们可以对错误信息进行统一处理或格式化，以便在多个请求中使用相同的错误信息处理逻辑。 0. 添加请求头、设置超时时间等功能：我们可以在二次封装中添加一些公共的请求头、超时时间等参数，以便在多个请求中使用相同的参数。 0. 支持自定义拦截器：我们可以通过自定义拦截器来对请求或响应进行处理，例如添加 token、在请求头中添加认证信息等 ### 如何标识用户已经登录在 Web 应用程序中，标识用户是否已经登录通常使用 Session 或 Token 的方式。 Session 是一种服务器端的技术，用于跟踪用户的状态。当用户登录成功后，服务器会创建一个 Session，并为该用户分配一个唯一的 Session ID，将该 Session ID 存储在 Cookie 中或者通过 URL 传递给客户端。在用户访问其他页面时，客户端会将 Session ID 发送回服务器，并使用该 ID 来查找服务器端的 Session 数据。如果 Session 数据存在，说明用户已经登录，否则用户未登录。使用 Session 的优点是可以在服务器端存储敏感的用户信息，不会在客户端暴露。 Token 是一种基于客户端的技术，通常使用 JSON Web Token (JWT) 或类似的技术。当用户登录成功后，服务器会生成一个 Token，并将该 Token 发送给客户端。客户端在后续的请求中携带该 Token，服务器可以通过解析 Token 来验证用户的身份。使用 Token 的优点是可以让客户端缓存用户的登录状态，减轻服务器的负担，同时可以在不同的服务之间共享用户的登录状态。在实现登录功能时，通常需要将用户的登录信息存储在服务器端，例如数据库、缓存等等。当用户登录成功后，服务器会创建 Session 或生成 Token，并将其返回给客户端。客户端可以将 Session ID 存储在 Cookie 中，或将 Token 存储在本地存储或会话存储中。在后续的请求中，客户端会将 Session ID 或 Token 发送回服务器，服务器可以根据 Session ID 或解析 Token 来验证用户的身份 ### token已经过期的话，我想要刷新token如何实现在实现 Token 刷新功能时，通常需要注意以下几个步骤： 0. 在服务器端，需要定义一个用于刷新 Token 的 API 接口，该接口需要验证当前 Token 的有效性，并根据需要生成一个新的 Token，并返回给客户端。 0. 在客户端，当发现当前 Token 已经过期时，需要向服务器端发送一个刷新 Token 的请求，并将当前 Token 和刷新 Token 的回调函数传递给服务器端。 0. 在服务器端，当收到客户端发送的刷新 Token 的请求时，需要验证当前 Token 的有效性。如果当前 Token 有效，生成一个新的 Token，并将其返回给客户端。如果当前 Token 无效，需要向客户端返回一个错误码或提示信息。 0. 在客户端，当收到服务器端返回的新 Token 时，需要将新 Token 存储到本地存储或会话存储中，并调用刷新 Token 的回调函数 ### 无感刷新token 在前后端分离的应用中，为了保证安全性和用户体验，通常会使用token来实现用户身份认证。当token过期时，需要重新获取新的token，以保持用户的登录状态。在这种情况下，无感刷新token可以提高用户体验，使用户无需手动重新登录即可继续访问应用程序。以下是一种基本的无感刷新token的实现思路： 0. 定义token的过期时间，例如30分钟。 0. 在用户每次发送请求时，检查token是否快要过期，例如在token过期时间前5分钟进行检查。 0. 如果token即将过期，发送一个请求给后端，请求新的token。 0. 如果后端返回新的token，将新的token保存在本地，同时更新所有请求中的token值。 0. 如果后端返回错误或者新的token无效，清除本地token，跳转到登录页面。通过这种方式，即使token过期，用户也不需要手动重新登录即可继续使用应用程序，从而提高用户体验和应用程序的安全性。当然，具体实现细节可能因具体应用场景而异，需要根据实际情况进行调整。 ### 将上面的操作写在哪里呢？在实现无感刷新token的过程中，主要涉及到两个方面的实现：前端和后端。前端方面，可以在请求拦截器中实现token的检查和更新。可以通过在请求头中设置Authorization字段，将token发送给后端。当token即将过期时，可以在请求拦截器中发送一个刷新token的请求，并将新的token保存在本地存储中，同时更新所有请求的Authorization字段。这样，即使token过期，用户也无需手动刷新token即可继续使用应用程序。后端方面，需要实现一个token的刷新接口，接收旧的token并返回新的token。在处理刷新请求时，需要对旧的token进行验证，以确保该请求是合法的。如果验证通过，则生成新的token并返回给前端，否则返回错误信息。总之，在实现无感刷新token的过程中，前端和后端都需要进行一定的实现。前端需要在请求拦截器中进行token的检查和更新，后端需要实现一个token的刷新接口，并对旧的token进行验证。同时，还需要定义token的过期时间，并根据实际情况进行调整 ### 响应拦截器的功能响应拦截器是前端网络请求中一个非常重要的概念，它的主要功能是在从服务器接收到响应数据之后，对响应数据进行处理，然后再将其返回到调用处。响应拦截器的主要功能包括以下几个方面： 0. 错误处理：响应拦截器可以检查响应数据中是否存在错误信息，例如请求失败、权限不足等。如果存在错误信息，则可以根据实际情况进行处理，例如跳转到错误页面、显示错误信息等。 0. 数据处理：响应拦截器可以对响应数据进行处理，例如对数据进行格式化、过滤、排序等操作。这样可以提高应用程序的可读性和可维护性。 0. 统一处理：响应拦截器可以对所有的响应数据进行统一处理，例如添加一些公共的响应头、对返回的数据进行加密等操作。这样可以提高应用程序的安全性和可扩展性。 0. token刷新：响应拦截器可以在响应数据中检查token的过期时间，如果即将过期，则可以自动进行token的刷新，从而实现无感刷新token的功能。 0. 缓存处理：响应拦截器可以对响应数据进行缓存处理，例如将响应数据存储在本地存储中，以提高应用程序的性能和用户体验 ### 反问 - 您对我的面试表现和之后学习前端的建议看我自己的兴趣，看我对之后的哪些技术比较感兴趣，然后说了好几分钟的一些我都没听过的前端技术/(ㄒoㄒ)/~~ 一下子就感觉自己的前端之路才刚刚开始起步，后面的前端技术好多呀 - 之后还会有二面吗？楠哥会给我消息，最迟是明天 - 公司技术栈和技术氛围你知道你投递是小宇宙吧，我们公司小宇宙全是react，然后很详细的给我介绍了react里的很多东西 ## 丁香园 > 面试体验最差的一家！面试官一进来就挎着个脸，怨气十足的样子，随便问了一个八股就开始手撕，因为当时我心里想着另一家公司的二面，所以没怎么走心了(互相KPI？) - 讲一下防抖和节流 - 手撕一下 - 做个算法(内容我忘记了) 反问环节，不好意思😅完全不想反问你任何问题，然后面试官就嘲讽了我一顿就挂电话了😅 ## 合合信息 > 面试官是一个听声音感觉年纪蛮大的一个人，人很和蔼！很愉快的一次面试上来面试官就自我介绍，然后介绍公司，然后就问我有什么需要反问的？第一次遇见这种情况哈哈哈 ### vue响应式原理 ### http1和http1.1的区别 HTTP（Hypertext Transfer Protocol）是用于在Web上传输数据的协议。HTTP / 1.0和HTTP / 1.1是两个版本的HTTP协议，下面是它们之间的一些区别： 0. 持久连接：HTTP / 1.1引入了持久连接，这意味着在单个TCP连接上可以发送多个请求/响应对，从而减少了每个请求的延迟。HTTP / 1.0在每个请求/响应之后关闭TCP连接。 0. 块传输编码：HTTP / 1.1支持块传输编码，这意味着可以在接收响应时逐步解压缩数据，而不必等待整个响应。这对于处理大型响应或流式数据非常有用。 0. 身份验证：HTTP / 1.1提供了更安全的身份验证方法，例如基于令牌的身份验证方案，可以替代HTTP / 1.0中的基本身份验证。 0. 缓存处理：HTTP / 1.1对缓存处理进行了改进，包括新的Cache-Control指令，可以更好地控制缓存行为。 0. 响应码：HTTP / 1.1引入了更多的响应码，例如“100 Continue”，这使得客户端可以更好地控制它们的请求行为。 0. 主机头字段：HTTP / 1.1要求在每个请求中都包含主机头字段，这使得服务器可以更好地处理多个虚拟主机。 0. 管道化：HTTP / 1.1支持管道化，允许客户端同时发送多个请求，从而提高性能。HTTP / 1.0不支持管道化。 ### 除了前端你其他的学的怎么样？比如计算机组成原理和网络之类的其他的我不太行诶(这里希望是别问太难)，结果面试官就笑了，说那咱们就不问了然后就开始闲聊了😂 > 这里面试官建议我好好学学计算机基础那些，那些相比于前后端的技术，可以让我在AI的冲击下走的更远，心里也蛮有感触的，毕竟大家都看见了chatGPT带来的威力，算是一次很轻松愉快的面试吧 ## 同程旅行 ### 项目看得出来面试官是提前对我的简历看了很多的，一上来就先对我的项目进行了分析，然后问我最近的一次实习（就这个最近的一次实习直接把我整不会了，一下就紧张了起来😭）和项目是什么时候 > 我最近还没有实习，零经验，我直接介绍我自己的项目可以吗？这里感觉自己介绍的项目太拉胯了，没有很好的体现出自己的项目，接下来应该将自己的项目进行概括才行啊 #### 你为什么要用jsx进行开发组件库呢？有什么好处呢？ JSX 是 React 中一种用于编写组件的语法，它可以将 HTML 和 JavaScript 结合起来，让开发者更加方便地编写动态组件。使用 JSX 进行组件库开发的好处如下： > 0. 增加可读性和可维护性：JSX 让代码看起来更像是 HTML 模板，这使得代码更容易阅读和理解，也更容易进行修改和维护。 > 0. 提高开发效率：使用 JSX 可以减少开发者在编写组件时需要编写的模板代码，这可以减少代码量，提高开发效率。 > 0. 更好的性能：JSX 可以通过使用虚拟 DOM 来优化组件渲染性能。React 在每次组件更新时会生成新的虚拟 DOM 树，并与旧的虚拟 DOM 树进行比较，然后只更新需要更新的部分，从而提高渲染效率。 > 0. 易于与 React 集成：React 是一种流行的前端框架，使用 JSX 可以使组件库更容易与 React 集成，从而提高组件库的适用性。综上所述，使用 JSX 进行组件库开发可以提高开发效率、可读性和可维护性，并且可以提高组件渲染性能，从而使组件库更加适用于 React 等前端框架 #### pinia在这个项目里解决了什么问题在一个 Vue 3 项目中使用 Pinia 可以解决以下问题： > 0. 简化状态管理：Pinia 提供了一个简洁的 API，使得我们可以更容易地定义和管理状态，并在整个应用程序中共享它们。 > 0. 更好的类型支持：Pinia 提供了一个类型安全的 API，可以让我们更容易地编写类型安全的代码，并减少错误。 > 0. 更好的可测试性：Pinia 的状态管理使得我们可以更容易地对 Vue 3 组件进行单元测试，从而提高代码的可测试性。 > 0. 更好的性能：Pinia 的状态管理实现了基于 Proxy 的响应式系统，从而提高了性能并减少了不必要的重渲染综上所述，Pinia 能够帮助我们更好地管理 Vue 3 应用程序中的状态，并且提供了更好的类型支持、可测试性和性能，从而使得我们可以更容易地编写高质量的 Vue 3 应用程序。在这个项目中使用 Pinia，可以提高项目的开发效率和代码质量 #### pinia的store你是如何进行设计的在设计 Pinia 的 store 时，我们通常需要考虑以下几个方面： > 0. 状态的划分：我们需要考虑应用程序中需要管理的状态，并根据不同的功能和需求进行划分。通常情况下，我们会将状态划分为多个 store，每个 store 管理一部分相关的状态。 > 0. Store 的命名：我们需要为每个 store 提供一个唯一的名称，以便在整个应用程序中引用它们。 > 0. Store 的定义：我们需要定义每个 store 的结构，包括 store 的状态、getter、mutation 和 action 等。 > 0. Store 的注册：我们需要将定义好的 store 注册到应用程序中，以便在应用程序的其他地方使用。 > 0. Store 的使用：我们需要在组件中使用 store，通过 getter 获取 store 的状态，并在需要时通过 mutation 和 action 来修改 store 的状态。在实际的应用程序中，我们通常会根据具体的业务需求来设计 store 的结构和划分。一般来说，我们会将相关的状态放在一个 store 中，并通过模块化的方式来组织多个 store，从而实现更好的可维护性和可扩展性。在使用 Pinia 的过程中，可以参考官方文档提供的示例和最佳实践，以便更好地设计和管理 store，从而提高应用程序的性能和可维护性 #### 你的store有进行模块的拆分吗？还是说放在一起在实际应用程序中，将 store 模块化并组织成多个文件通常是比较好的实践，这有助于提高应用程序的可维护性和可扩展性。通常情况下，我们会将 store 模块化为多个文件，每个文件对应一个 store 模块，然后通过 Vuex 的模块化功能来组织它们。每个 store 模块负责管理自己的状态、getter、mutation 和 action，并且可以通过模块间的调用来实现跨 store 的状态共享。模块化的方式可以使得 store 更加易于维护和扩展，因为每个模块只负责自己的一部分功能，而不会将所有的状态都放在同一个 store 中，从而导致代码的臃肿和难以维护。在使用 Pinia 时，同样可以将 store 模块化为多个文件，并使用 Pinia 提供的模块化功能来组织它们。每个 store 模块也负责管理自己的状态、getter、mutation 和 action，并且可以通过其他 store 模块的调用来实现跨 store 的状态共享。综上所述，将 store 模块化并组织成多个文件是一个比较好的实践，可以提高应用程序的可维护性和可扩展性 #### 你做的组件库当中有遇见什么困难吗？可以举例说明 ### html5 #### h5当中新增了哪些以下是 HTML5 中一些新增的功能和特性： 0. 新的语义化标签：HTML5 新增了一些语义化标签，如 `

`、`

`~`

` - `
`、`
`、`
` - `` - `` - `
` - `
`、`
`、`
`、`
` 等 HTML5 新增的语义化标签行内元素： - `` - `` - ``、`` - `` - `` - `` - `
` - `