面：你先自我介绍一下吧
我：……
面：你是去年毕业是是吗？
我：是的，去年毕业的
面：你是什么时候开始做开源项目的？
我：去年的八月份
面：是什么契机让你做开源项目的呢？
我：当时很多项目都使用 element 组件，当时也不是很了解那些组件是如何做出来的，也不清楚为什么在 vue 中写一个 el- 什么的标签就可以实现组件展示，后来就在 b 站上看到一个视频，讲解了一些组件的实现原理，后来就明白了组件是如何实现的，又去看了看那些组件库的源码，就都了解了，就开始自己做了
面：我看你的 fighting-design 项目的 Contributors 成员还是挺多的，你是如何组织这个团队如何开发的呢？
我：现在提交了大概 700 多次了，基本上前 300 次提交都是我自己在做，后来我去掘金上发了一些文章，后来又去群里分享了一波，就又很多人来加入了进来，后来我就创建了一个群，平时都是在群里进行分享的
面：那你能不能介绍一下你的 fighting-design 是如何设计的，中间有没有遇到过什么挑战，你是如何解决的呢？
我：组件设计方式的话，都是先从简单开始，我先用 figma 做出设计稿，在 github 发起 rfc，将设计稿和配置项都列举出来，还有一些参考文档，还有一些难点之类的，我都会列举出来，之后在群里给他们分享，然后有人就会想要参与这个组件，就有他来写，他写完之后我看过之后会给一些修改的建议再进行修改，或者有些组件直接我自己来写。然后有什么难点呢，之前有遇到过打包相关的问题，当时使用 rollup 进行打包，打包之后可以在 vue3 的项目中进行使用，但是这个项目再打包之后就会报很多类型的错误，后来找到原因就是，打包没有把类型打包进行，因为都是使用 ts 来写的，后来感觉 rollup 打包比较复杂，就改为使用 vite 打包了，将打包类型也都配置好了，就实现了打包，大概就是这样
面：rollup 相比 vite 复杂在哪里呢？
我：rollup 打包，比如打包 css、vue、ts 都需要专门的配置插件，都需要依赖它们才可以正常打包，但是 vite 底层使用的是 rollup，它内置集成的比较好，所以配置起来比较简单
面：那你有没有了解像 rollup、vite 这种新型的构建工具相比于 webpack 它们的区别是什么？
我：它们的区别不太了解
面：那么你自己项目中写业务的时候有没有使用 webpack？
我：webpack 现在用的很少，都是使用 vite
面：你是去年 5 月份才开始工作是吗？
我：是的，五月十号
面：你在做组件库的时候，我看你使用了 monorepo，那么这个 monorepo 是什么东西呢？
我：比如咱们按照以往的方式，要是写一个项目，组件库是一个项目，官方文档也是一个项目，这样的话可能就会分成两个仓库来管理，每次都需要拉取两次代码，安装两次依赖进行管理，这样就比较麻烦嘛，那么 monorepo 就是将文档、组件、样式什么的都混到一个项目中，通过 pnpm 统一管理依赖，将公共的依赖安装到最外层，然后每个项目还都有单独的依赖项，然后就可以通过一个命令将所有的依赖全部安装上了，方便管理
面：前面讲到的 pnpm 相对于 npm 还有什么区别吗？
我：它下载速度块，安装的 node_modules 体积非常的小
面：有没有了解底层的实现，或者说 pnpm 是如何做到这一点的？
我：这个了解过一些但是我现在不太记得了
面：你觉得你做的组件库和市面上流行的组件库有什么区别呢？
我：世面上大多数组件都已经成型了，比如一些新手也想去参与开源的贡献去提个 pr，那么已经成型的组件库可能不是很好入手，不太了解整体是一个什么样子的流程。正好我这个组件库我刚刚起步的一个，那么我可以从 0 到有带着你实现一个完整的组件。
面：你对于模块化的了解吗？
我：了解啊
面：那么你的组件库打包出来模块化是如何处理的呢？
我：模块化的话，我打包自动根据我的目录结构实现了啊。每个工具函数工具类都抽离出来了，然后在项目中进行安装，就可以再任何地方使用到了
面：就是我像问一下，你有没有考虑过兼容方面的问题呢？比如你的组件库能否在 ie8 的版本上走？考虑过这个问题吗？
我：因为现在不是微软已经不再维护了嘛，我现在只要把一些 Safari 浏览器、火狐浏览器、谷歌浏览器主流的浏览器兼容了就可以我感觉
面：但是主流的浏览器也是有比较老的版本，因为你现在使用的工具都是比较新的，那么不管它们的构建流程还都是比较新的。那么我再问的具体一点，那么有没有了解过 esModule 和 commonJs？
我：了解过，我现在打包都是使用 ES 打包的
面：esModule 是吗？
我：之后那些打包都会配置，都会加
面：那 esModule 和 commonJs 它们之间有什么区别有了解吗？
我：了解，比如 esModule 就是使用 import 导入，export default 导出。commonJs 使用 require 导入
面：你做组件库有没有写过单元测试？
我：写单元测试
面：你是如何实现的呢？
我：单元测试使用了两个工具，一个是 vitest 和 utils-test，这两个结合来使用的
面：具体是怎么做的呢？
我：比如组件都有很多的参数，就拿按钮组件来说，它可以通过不同的 type 来实现不同的样式展示，实现的方式是根据不同的类型进行 class 拼接，那么就测试传入不同的 type 能不能拼接成预期的 class 类名
面：你的组件里有没有用到过 slot？
我：用过啊，就是插槽啊
面：你能讲讲 vue 的插槽，或者你对插槽的理解
我：比如按钮组件，按钮组件中间有一段文字嘛，那么直接在组件的标签中写入内容，就可以插入你指定的 slot 的位置，还用到了具名插槽，给 slot 设置 name 属性，插槽使用 template 标记 name 属性，就可以插入指定 name 的位置
面：你的组件样式是怎么设计的？是你自己设计的吗？
我：对，自己设计，使用 figma
面：你对这种组件的设计规范有没有了解
我：我的规范就是，我有一套统一的色号，所有的组件都是遵循那一套标准的色号来进行设计的，还有一套规定的尺寸
面：你是怎么部署的？
我：是哪方面部署？
面：没事没事，你现在是纯 github 的开源代码是吧？
我：你说文档是怎么部署的吗？
面：对，是这个意思
我：文档的话我使用 vitepress 来写的，我本地打包之后，我有一个自己的服务器，直接打包放到服务器上就好了
面：你在公司使用的也是 vue3 吗？
我：vue3 和 vue2 都有
面：那么 vue3 和 vue2 有什么区别呢？
我：在模板层面的话，vue3 可以有多个根节点，vue2 只能有一个根节点。在 js 方面 vue3 新增了 setup 语法糖，composition API，声明周期钩子前面都加入了 on，没有了 this，比如计算属性和监视器都需要引入才能使用，还有响应式变量都需要通过 ref 进行包裹，底层方面更新了响应式 api，vue2 使用的是 Object.defineProperty，vue3 改用了 es6 新增的 proxy
面：proxy 相比 defineProperty 它的优势是什么？
我：defineProperty 的话只能监视到对象中某一个属性发生变化它才会执行内部的函数，proxy 可以监视到整个对象，这个对象中的任何一个属性发生变化它都可以执行
面：vue 是如何实现 data 里面的响应式？响应式原理有了解嘛
我：了解一些，用 ref 包裹之后就是一个响应式数据了，比如一个 p 标签里面有一段文字，用 proxy 监视到内部的文字发生变化它可能就会重新执行一下 innerText 赋值的操作，将新的对象属性重新 innerText 到这个标签里面。因为它可以监视到对象中的数据发生变化嘛，标签里面的文字就是对象里的文字，当它发生变化就会重新执行一下渲染的函数，大概这样
面：vue3 的 composition API 相比 vue2 的选项式 API 它的优势是什么呢？
我：vue2 的 option API 将生命周期啊，计算属性啊，监视器全部都在组件里面，就算你用不用它都会打包进去，影响打包体积，vue3 你需要什么引入什么，这样可以减少打包体积，主要这一点
面：我看你项目中有一个数字化全端 3D 云平台能介绍一下吗？
我：这个是我上一家公司自研的产品，里面有很多 3D 的东西，比如桌子，电脑什么的，3D 模型，我通过调用 3D 那边的接口我将 3D 展示到页面上可以进行拖动，看到各种的角度，还可以产生爆炸效果，看到它每一个零件是干什么的？
面：前端这一块是怎么实现的？
我：都是调用 3D 的接口，使用 canvas 来展示的
面：canvas 展示的，3D 的接口是指的什么？
我：3D 的接口，因为我们那边有 3D 的开发工程师，我们是协同配合开发的项目，他复杂写 3D，我负责调用它的接口进行展示
面：那么他返回给你的数据是什么样的数据？
我：大概就是对象类型的
面：你是怎么用 canvas 来渲染的呢？
我：我想想啊，这个不太记得了
面：那么你这边渲染层面实际上做的不多是吧？
我：对，其实主要是写业务
面：canvas 主要也没怎么写是吧？
我：对，主要调用它的接口，基本上可以直接展示了
面：你上面写的这些性能优化，讲讲吧，必须首屏加载之类的
我：当时性能还是比较差的，使用浏览器自带的灯塔工具可以测试性能的评分嘛，当时减少了一些依赖的引入，将那些第三方库的完整引入都变成按需引入了，然后组件改用了异步组件的方式，大概主要这种比较大型的性能优化，提示了大部分性能，还有一些小的优化
面：组件太大，是有多大啊？我不太能明白大的话能大到哪里去
我：大组件大概有 500 行代码左右吧，逻辑还是比较多的，比如首页，会由不同的展示状态，比如有 3 中展示状态，那么这三种展示状态都对应的 3 个组件，如果将这个三个组件全部引入进去，那么它都会全部打包进去，那么如果使用异步组件，按需引入的话，需要哪个使用哪个
面：异步组件按钮引入是如何实现的？
我：按需引入 vue 中有内置的 API 可以使用啊
面：看你有一个 Electron 的项目，可以讲讲吗？
我：这是 vue + Electron 做的，这是一个桌面端的应用程序，可以唤醒本地应用程序的一个项目，它就是一些基本的业务逻辑，登陆什么的，还有轮播图，主要是它可以后台返回的路径打开本地电脑其他的应用程序
面：那么这也没需要 Electron 什么事情啊
我：对，它就是需要一个应用程序
面：axios 有做过处理是吧？你都是怎么处理的？
我：用了响应拦截器和请求拦截器什么的，比如请求拦截器要发送一些 token 之类的，还有一些其它加密字段之类的，响应拦截器统一处理了响应结果，因结果中可能是 res.data.data，然后就通过拦截器统一返回需要的数据了
面：比如我在这里想要做一个防重复点击，需要怎么做？
我：是在哪里？
面：就在拦截器里面
我：比如点击请求一次的话，那么就不要每次点击都重复发送是吗？
面：就是上一次返回结束之后才可以继续请求
我：这个我想一想哈，因为这个是一个异步操作嘛，使用 async 函数，在 await 没有出来结果的时候，点击就 return 返回出去，就不要再继续发送请求了
面：你这个不是在拦截器里面做
我：哦，是要在拦截器里做是吧？
面：也不一定是在拦截器里做，但是不能说每一次点击都调用接口，那么每次都写这样一个判断，那么如果请求很多不是就会增加代码量吗？所以写在拦截器里面比较好
我：但就在拦截器里面做，如果这次请求还没有完全返回的时候，再请求就让他直接返回，就不要让它继续发送了
面：我们一般请求都会有一个 loading 的状态，有一个圈圈在哪里一直转，那么我现在有很多个请求，这么多个请求在第一个请求进来的时候，就开始转，在最后一个请求出去的时候，在这个转结束，那么你觉得怎么处理这个逻辑比较好，就比如说我怎么知道最后一个请求结束？
我：这个可以使用 promise.all 方法可以处理所有的 promise，就可以通过它来判断，就将所有的请求都发送完成之后，将 loading 变成 false，正常发送之后变成 true
面：promise 除了 all 之外还有哪些方法？
我：promise.resolve 成功的，promise.reject 失败的，还有方法可以处理最快请求的，那个叫什么不记得了
面：你对这个网络协议有什么了解？
我：了解一些基础的，了解一些状态码之类的
面：又遇到 401 吗？
我：401 没有，都是 404
面：我看你了解后端开发逻辑，你是写过后端吗？
我：是的，我之前使用 php 的 thinkPhp 框架写过后端
面：是什么时候写的？
我：是去年的六七月份左右
面：写了多长时间
我：当时就是写了一些博客的增删改查的东西
面：那么你最近有没有学到一些前沿的技术，或者看过什么？
我：最近一些前沿的技术……我感觉我就是用到了一些比较好用的插件
面：你说
我：比如做组件库嘛，每个组件都需要 name 的属性，那么在 vue3 不能在 setup 直接设置 name，那么有一个 vite 的插件可以直接在 setup 的 script 标签上设置 name。我还看了眼它的源码，虽然是这样设置 name 的，但是底层的实现逻辑，还是重新创建了一个 script 标签设置了 name，只不过使用了插件可以直接在 script 上设置 name
面：那这个实现的挺简单的，那么你为什么做了 fighting-design 之后，后面有做了后面别的组件库
我：tyh-ui 那个是我第一次做的练手的项目，实现了不少的组件，后面这个我感觉是社区中我带领着团队做的，因为之前的组件库也不是很完善，功能也比较少
面：你这个 vscode 主题插件是怎么做的，可以讲一下吗？
我：当时我在 vscode 的市场上找了很多的主题插件，也没什么喜欢的。都看着不舒服，然后就把我下载到本地主题的源码全部都看了一遍，就了解了如何开发的主题的，后来就自己配置了一套色号，自己开发了一个，然后现在 vscode 就是用自己开发的主题来写代码
面：你这个函数工具库是干嘛用的？
我：因为非常非常火的 lodash 是用 js 写的嘛，因为 ts 现在这么流行，我就将我平时使用的一些函数封装到这个，发布到 npm 上了，也使用 ts 进行重构了
面：就是使用 ts 写的工具库是吧？
我：对的
面：都有哪些工具呢？
我：比如说判断一个值是否为数字，判断是否为 null，还有防抖，节流，数组克隆，数组去重，对象的克隆，对象深克隆这种
面：你讲讲这个防抖和节流的实现逻辑
我：防抖，比如说一个事件反复触发的逻辑，就是不要让它反复触发，节约性能。比如浏览器滚动事件，在滚动的时候会输入一些日志，那么用防抖的函数的话，当你滚动停下来的时候它才会触发一次，节流的话，会在你设置的指定时间后触发一次
面：行，我这边问的差不多了，您这边有什么问题吗？
我：咱们公司主要做什么呢？
面：基于区块链做的…………
我：咱们技术方面都是什么呢？用什么框架之类的？
面：现在招的这个岗位主要使用 vue3、Git 之类的做主要的开发，但是有一些老的项目是用 react 写的，也需要维护，大概是这样
我：平时咱们管理代码有什么规范吗？
面：管理代码，现在在招的这个岗位，小组只有一个前端，就是说规范比较随意一些
我：那咱们公司有多少人啊？
面：整个公司吗？
我：对的
面：整个公司大概有 300 人左右吧
我：前端和后端的开发团队有多少人？
面：这个有点数不过来了，估计整个研发有 100 多个人，但是现在正在招的这个岗位小组比较特殊一点，只有一个前端，两个后端，因为它们主要做底层这一块建设的，所以不需要太多人
我：您平时都是如何获取到前端最新的技术的呢？
面：我一个就是 github，我逛的最多的就是 github，因为上面有一个趋势，它会有最流行的，或者大家最新的东西，看一看这个，其次的话就是我自己也有微信群嘛，大家也都会分享一些前沿的技术，一起讨论讨论，然后的话，说实话掘金这种的话，面试题比较多上面，前沿的东西不会第一时间让你知道，第一时间让你知道的还是自己上一些国外的网站吧，然后还有很多开发者大会
我：您平时经常使用 github，如果您看到感兴趣的项目会去提 PR 之类的吗？
面：那肯定是我平时会用这个东西，并且我遇到了 bug，就会提一下，不多哈，不是说为了提 pr 去提 pr
我：您平时遇到问题，或者遇到 bug 有什么比较好的解决方式吗？通过什么方式进行解决呢？
面：基本上开发的话，都会打断点，最直接有效的，让你知道你在哪个作用域里面，这个作用域里面的活动对象是什么样的，通过断点配合谷歌的提示是最有效的。其次的话，要对 js 这一块比较熟悉一点，这样可以更快的找到问题，基础打好
我：您觉得我还有什么需要提升的吗？
面：你的话其实也刚毕业一年，本身我对你这块的要求不会太高，比如你的亮点是有足够的驱动力，去做一些工作和开源的工作和对于自己的项目优化，但是你的这个缺点就是说：钻研的还不够深，我们自己有这个驱动力来做做这个自己感兴趣的东西是正确的，但是更好的就是，我既然做了，我就直接做到底，我是像把这东西研究的头侧一点，现在这是我对你的建议。就是说不是做个东西做出来就好了，做出来的同时，我需要去看，我这个东西的优势和劣势和其他人比这差在哪里，但是不一定和其他人一模一样，但是一定要知道我差在哪里，就说我可以明确的指定。然后就是你有这个兴趣和这个驱动力是很好的，就说在往深钻研一些吧
我：那您是看了我的项目是吧？
面：我有看了一些，就说和你聊的过程中我就在看，包括之前问你的防抖和节流，在问的途中我就打开了，你这写的还是比较简陋的，就是说既然写了，就写好一些，我哪怕我直接拷一个过来，我也要拷一个好一些的过来，对不对？但是拷过来要理解，拷过来了，理解了，那么就是我的，对不对？
我：对啊
面：对啊。你既然做了，很多人根本没有迈出这第一步，你既然已经迈出这第一步了，那么就可以往后面多迈几步，那么对你以后的帮助就会非常大，这样子的
我：您感觉我 fighting-design 的项目还有什么需要提升或者有什么缺点吗？
面：那个项目我是昨天看了一点，今天没打开有点忘了，我就讲讲我跟你面试过程中给我的感觉哈，你学习的东西还是比较浅，实际上组件库我们能写代码的都能写，但是就说我既然写了，我的组件有什么优势呢？你就没有讲的特别好，你没有说的很清楚，就比如我设计这个组件库，我肯定是奔着别人会用，那么别人为什么会用呢？我觉得你在设计的时候可以多考虑一下。包括之前问你的 monorepo 这个架构包括 pnpm 这些东西实际上做组件库都会用到，pnpm 的核心原理使用了内容巡视，相比于 npm 的巡视方案是更优的，然后它使用了这个硬连接去查找这个文件，并且做了引用，它的核心原理你是可以去再往深入钻研一些，既然我用了，就需要知道它为什么好，包括 vite、rollup、webpack 这些我问你都不是白问的，就说我感觉你是对技术感兴趣的人，可以再往这里边多看一看
我：好的
面：我不知道你现在是 6-10 号离职的是吗？然后到现在还都没有找到工作是吗？
我：前一段时间休息了一段时间，然后最近在家里写开源
面：好的，那么开源你可以多做一些。然后我就和你讲吧：我这块面你纯粹是处于我的个人兴趣，就是说他们都在招 3 年工作经验以上的，我看你是在开源这块自驱力我就面你，然后呢，我一会会和他们讲一下你的这个情况，我会和他们说这是一个有自驱力的小伙子，虽然工作经验不多，但是开源工作做的还是可以的，我和他们这样说，具体他们后面怎么说后面我们也不知道是吧，我就先这样和你说，你就先等通知吧，然后你这块再往深看一看
我：好的好的
面：那么咱们今天就先聊到这
（结束）