面试流程
自我介绍（1 分钟）
基础信息
面试官您好，我叫 noxussj，97 年出生，有 7 年的前端工作经验。
技术信息
我的技术栈包括 Vue2、Vue3、Element-UI、ES6、Sass、和 Echarts 等。 可以独立完成前端项目，也可以带领其他前端一起完成项目。主要擅长 Web 端开发，例如可视化大屏、后台管理系统或者公司官网等等。
热爱学习
我平时会将自己学习到的新技术，或者是整理好的前端知识发布到小红书帐号上，以及自己的博客网站中让其他前端学习。因为我觉得自己学会并不算真的会，要是能教会其他前端才算真的会。我自认为学习能力还算不错，对于新的技术能够快速上手并应用到实际项目开发中。
以上就是我的介绍。
项目介绍
物联网应用平台
项目需求（1 分 20 秒）
我先简单说一下项目需求呗。
我们公司主要分为硬件和软件两个部门。硬件部门根据客户需求进行定制生产，例如在森林安装防火语音播报设备、在井盖内安装水浸监测设备，在汽车道路上安装摄像头等等。
物联网应用平台则负责对这些硬件设备进行配置，例如调节语音播报的音量大小、设置水位监测的报警阈值等。除了配置功能外，平台还可以展示设备的采集数据和地理位置信息，例如统计某个路段的车流量信息等。
负责工作（2 分钟）
我这边主要负责开发时间的评估、协调工作任务给其他前端人员，跟进开发进度等等。搭建项目框架、制定前端开发规范以及代码提交规范，最后参与协同开发。
在这个项目中，我们主要使用了 Vue3、Element Plus 和 Echarts 等技术栈。除了常规的页面开发以外，我特别关注开发效率，认为在做相同类型的项目时，这一次的开发时间应该要比上一次的开发时间要短。
例如我会编写页面布局组件、封装 Echarts 插件并发布到 NPM 方便多个项目复用、由前端定义接口格式，但是需要跟后端确认格式没问题后在进行开发，这样前端就不需要等待后端开发完成才能绑定接口，后续只需替换接口 URL 即可。最关键的还是使用 Node.js 的 plop 工具自动生成项目的页面文件和 api 文件。
以上是我项目的介绍
提问
如何通过 plop 生成项目文件？
通常在开发一个页面时，我会将其拆分成多个小组件，并手动创建和引入相应的组件和 API 文件。由于这些操作在每个页面中都需要重复进行，我利用 Plop 来自动生成这些文件。只需将小组件的中英文名称配置到 data 数组中，遍历该数组，并结合 Plop 的 actions 事件，将组件的中英文名称传入已创建的 .hbs 模板中，即可自动生成所需的文件。
城市运行分析平台
项目需求（1 分钟）
我先简单说一下项目需求呗。
这个项目的核心是对城市进行更精细化的管理，整合城市管理相关的数据，并且通过 AI 摄像头进行识别道路水浸和拥堵、机动车违停、占道经营、垃圾堆放等情况，最终以可视化大屏的方式展示。
相比纯文字数据更加直观。就例如暴雨天气下，某些路段可能会出现水浸的问题，如果不及时处理有些车辆经过会导致涉水，传统的处理方式就是等用户上报，管理部门才能派人去处理。而通过可视化大屏，可以实时监控到哪些路段存在严重积水，直接指挥调度最近的工作人员进行处理。
负责工作（2 分钟）
我这边主要负责开发时间的评估、协调工作任务给其他前端人员，跟进开发进度等等。搭建项目框架、制定前端开发规范以及代码提交规范，最后参与协同开发。
在这个项目中，我们主要使用了 Vue、Element-UI 和 Echarts 等技术栈。我特别关注开发效率，认为在做相同类型的项目时，这一次的开发时间应该要比上一次的开发时间要短，所以我对其进行了时间成本分析，发现创建页面文件、编写页面布局、图表开发和接口对接占用了大部分时间，而且这些工作通常是有规律且重复的。
为了提升效率，我采取了以下措施、编写页面布局组件、封装 Echarts 插件并发布到 NPM 方便多个项目复用、由前端定义接口格式，但是需要跟后端确认格式没问题后在进行开发，这样前端就不需要等待后端开发完成才能绑定接口，后续只需替换接口 URL 即可。最关键的还是使用 Node.js 的 plop 工具自动生成项目的页面文件和 api 文件。
以上是我项目的介绍
提问
如何实现 vue 直播流视频？
数字农村
项目需求（1 分 30 秒）
这是我们团队与腾讯联合研发的一款微信小程序，但是太长时间没有跟进了，最近好像访问不上了。
主要是打造数字化农村，并推广到全国各个村镇使用。我们团队负责整个项目的 UI 设计和前端开发，而腾讯则提供设计风格指导，并在开发完成后他们那边进行最终的测试。
首先，用户可以通过微信账号登录该小程序，首次登录时需选择所属村庄，平台会根据用户所在的村庄信息推送对应的数据信息。平台提供了一个类似朋友圈的功能，称为“村民动态”。用户可以在这里发布文章、图片或视频，与村民们分享生活中的一些有趣的事情。发布的内容会展示在公共频道中，其他村民可以进行浏览、评论和点赞，这样就促进村民之间的互动和交流。此外，我们还集成了村庄公告功能，方便用户随时查看最新的村庄公告和政府通知。
负责工作（1 分 20 秒）
我这边主要负责开发时间的评估、协调工作任务给其他前端人员，跟进开发进度。还有搭建项目框架、制定前端开发规范以及代码提交规范，最后参与协同开发。
在这个项目中，我们主要使用了用美团开源的框架 mpvue 进行项目搭建，主要是基于 Vue 语法，减少其他开发人员学习成本。 利用后端提供的 accessToken & refreshToken 进行登录鉴权，保证数据的安全性。页面中的按钮添加防抖功能，避免用户多次点击导致不必要多次接口请求。
以上是我项目的介绍
提问
如何指定前端开发规范和代码提交规范？
使用 eslint 来约束代码缩进、主用 const 、副用 let、标签属性排序、导入代码排序、注释前面需要空行等等。
使用 git hooks 实现代码 commit 之前需要调用 commitlint 来校验提交信息格式。
遇到的问题，如何解决？
构建速度问题
问题：在使用 Webpack 构建项目时，随着项目规模的扩大，编译时间变得越来越长，严重影响了开发效率。
解决：后面就换成了 vue3 + vite 的框架。Vite 利用原生 ES 模块实现按需加载，快速启动和热重载。而 Webpack 在启动时需打包整个项目，导致编译速度慢，影响开发效率。Vite 提供了更高效的开发体验和更轻量的配置。
Echarts 图表隐藏性能问题
问题：在可视化大屏项目中，频繁切换页面导致浏览器崩溃。起初我以为切换页面后，之前的内容应该会自动销毁，但经过排查后发现，问题出在图表实例没有被销毁，导致了内存泄漏。
解决：我封装了 Echarts 的渲染方法，并在渲染时将图表实例存储到一个数组中。在页面切换时，我会监听这个事件，主动销毁数组中的图表实例，从而有效解决了内存泄漏的问题。
自动化部署
问题：每次项目更新后，都需要手动打包并发送给运维同事，等待他们进行部署，这个过程耗时且效率低下。
解决：为了解决这个问题，我们使用 Gulp 实现了自动化部署。通过配置服务器信息和上传目录，只需运行一个命令即可自动更新项目，显著提高了部署效率。
分支冲突问题
问题：当系统在线上运行时，遇到 bug 需要紧急修复，但我正好在开发其他需求，无法在一个分支上同时处理两个任务。
解决：后来我就用了多分支的方式来处理开发工作。每当有新需求时，我会新建一个分支，完成后再合并到主分支。如果突然遇到紧急 bug，我也会开个新分支修复，修好后再合并到主分支。
vue2 和 vue3 的区别
响应性系统：
Vue 2：使用 Object.defineProperty 来实现响应式，性能在某些场景下会受到限制，尤其是在处理大量数据时。
Vue 3：引入了 Proxy API，提供了更高效的响应式系统，能够更好地处理数组和对象的变化。
组合式 API
Vue 2：主要依赖于选项 API（data、methods、computed、watch 等）来组织代码，组件逻辑难以复用。
Vue 3：引入了 Composition API，使得逻辑复用和代码组织更加灵活，开发者可以使用 setup 函数来组合逻辑，提高了可读性和可维护性
根节点支持
Vue 2：每个组件必须有一个根节点。
Vue 3：支持 Fragment，允许组件返回多个根节点，提高了组件的灵活性。
TypeScript 支持
Vue 3：对 TypeScript 提供了更好的支持，提升了类型推导能力，使得开发过程更加安全。