七牛云社招一面面经（含答案）
大家好，今天的分享由我们团队的 uncle13 老师提供。
最近在给同学们做面试复盘时，发现很多同学复习了很长时间，复习资料都看过两轮，但回答时容易抓不到重点，很多时候连面试官想问什么都不清楚。
今天就以“七牛云”的社招一面为例，给大家介绍下不同的面试题可以从哪些方面去回答。
项目是怎么做的（低代码）
建议回答时先简要介绍低代码的概念和优势，然后结合你参与的项目，说明该项目中使用了哪些低代码工具或框架，以及具体实现了哪些功能。可以分享一些项目中遇到的挑战和解决方案，突出你在项目中的贡献和经验。
选择pnpm做monorepo的原因是什么？
这个问题需要回答你选择pnpm而不是其他工具的原因。可以从pnpm在处理共享依赖时的性能优势、版本管理的灵活性等方面进行解释，同时结合你在monorepo项目中使用pnpm的实际经验来说明其优势。
硬链接和软链接的区别
在回答这个问题时，可以先解释硬链接和软链接的概念和作用。然后强调硬链接与原文件共享inode节点，而软链接则是一个指向原文件的指针。此外，可以结合具体应用场景来说明两者的适用情况和使用方式。
低代码中按钮的事件处理
回答这个问题时，可以先解释低代码平台中的按钮事件处理的基本原理。然后结合你在项目中的实际经验，说明如何利用低代码工具提供的事件绑定机制来实现单击、双击、长按和多次连击等功能。
组件事件和组件之间的联动
这个问题需要解释组件事件的概念和作用，以及在Vue中如何使用自定义事件来实现组件之间的联动。可以结合具体的示例代码，说明父子组件之间通过props和$emit来传递和触发事件，以实现组件之间的通信与协作。
自定义事件的实现
回答这个问题时，可以先解释Vue中自定义事件的概念和作用。然后结合Vue的事件系统，说明如何使用
$on和$emit等方法来实现自定义事件的注册和触发。可以给出示例代码，加深对自定义事件的理解。选一个当时做的最复杂的点，详细说一下过程和解决方案（调整el-dialog缩放全屏，再用js操作monaco调整大小的性能问题）
在回答这个问题时，可以先介绍该复杂点的背景和需求，即调整
el-dialog的缩放全屏，并使用JavaScript操作monaco编辑器的大小。然后详细说明你在解决这个问题时所采取的步骤和思路。可以提到使用CSS的定位属性和尺寸属性来实现 el-dialog的缩放全屏效果，同时要处理窗口尺寸改变时的自适应。针对 monaco编辑器的大小调整问题，可以通过监听窗口尺寸改变事件，并根据新的尺寸重新计算并设置monaco编辑器的大小。在涉及性能问题时，可以提到一些优化措施，如合理使用防抖或节流函数来避免频繁的重绘操作，使用 requestAnimationFrame来优化动画效果等。聊一下requestAnimationFrame和requestIdleCallback
回答这个问题时，可以先解释
requestAnimationFrame和requestIdleCallback的作用和原理。requestAnimationFrame用于在浏览器下一次重绘之前执行指定的回调函数，以避免掉帧和提高动画性能。requestIdleCallback用于在浏览器空闲时段执行指定的回调函数，以减少对主线程的占用，优化任务调度。requestIdleCallback在浏览器空闲时没有执行怎么办
在回答这个问题时，可以说明
requestIdleCallback的执行是根据浏览器的空闲时间来决定的。如果在空闲时没有执行，可以考虑以下方案：调整任务的优先级，通过设置 requestIdleCallback的timeout参数来调整任务的执行时机。检查任务的逻辑，确保任务不会过于耗时或阻塞主线程。 Vue2和Vue3体验的一个差别
在回答这个问题时，可以先简要介绍Vue2和Vue3的主要特点和改进之处。然后结合你的实际体验，说明Vue3相对于Vue2的一些显著差异和优势。
可以提到Vue3引入了Composition API，使得组件的逻辑更加灵活和可复用。 Vue3采用了Proxy代理对象替代了Vue2中的Object.defineProperty来实现响应式系统，提供更高的性能和更好的开发体验。 Vue3进行了一系列优化，如树摇、静态节点提升、编译器优化等，提高了运行效率和打包大小。 组合式函数Composition
这个问题需要解释组合式函数的概念和作用，即将多个函数组合成一个新的函数。可以从函数的输入和输出以及可组合性等方面进行说明，并举例说明其在前端开发中的应用场景，如数据处理、状态管理等。
Vue2和Vue3的响应式原理
在回答这个问题时，可以先介绍Vue2和Vue3的响应式原理的基本思想和流程。可以强调Vue2使用Object.defineProperty来监听属性变化，而Vue3使用Proxy来实现。
对于Vue2，可以提到通过Object.defineProperty对数据对象进行劫持，当数据发生变化时触发依赖更新。 对于Vue3，可以提到使用Proxy代理对象，监听数据对象的变化并触发依赖更新。同时，Vue3还引入了Reactivity API，使得响应式系统更灵活和可扩展。 打包优化是怎么做的
在回答这个问题时，可以介绍一些常见的打包优化策略和技巧，以提高前端项目的性能和加载速度。
使用代码分割（Code Splitting）将代码拆分为多个小块，按需加载，减少首次加载时间。 静态资源压缩和混淆，如使用压缩工具、去除无用代码、转换图片为WebP格式等。 按需引入第三方库或组件，避免将整个库打包进最终输出文件。 使用懒加载（Lazy Loading）来延迟加载某些组件或模块，减少首次加载的数据量。 使用Webpack等构建工具的优化插件，如Tree Shaking、Scope Hoisting、Chunk 合并等。 monaco的vite汉化插件怎么做的
这个问题需要说明如何实现monaco编辑器在vite中的汉化过程。可以简要介绍monaco的vite汉化插件的原理和流程，以及你在实施过程中遇到的挑战和解决方案。
可以提到通过导入monaco的语言包文件来实现汉化，例如导入 monaco-editor/esm/vs/language/typescript/monaco.contribution.zh-hans.js完成对TypeScript的汉化。需要在vite项目中配置对应的插件或loader，以正确加载和解析monaco的语言包文件。 异步加载的方式
在回答这个问题时，可以介绍几种常见的异步加载方式：
使用 <script>标签的async或defer属性来异步加载JavaScript脚本文件。使用动态创建 <script>标签来实现异步加载。使用ES6的模块化语法中的 import()函数来实现按需加载模块。使用动态创建 <link>标签来异步加载CSS文件。ES6的import函数是如何实现异步加载组件的
当回答这个问题时，可以解释ES6的
import()函数用于异步加载模块的特性。可以说明它返回一个Promise对象，在调用时会动态地加载指定的模块，并返回一个包含该模块导出内容的对象。可以结合具体的代码示例，如使用 import()函数来异步加载Vue组件，然后通过动态注册或条件渲染等方式来使用加载的组件。构建缓存是如何实现的
在回答这个问题时，可以介绍一些构建缓存的常见实践：
利用构建工具（如Webpack）提供的缓存功能，将编译过的结果缓存起来，在下次构建时可以重复使用缓存的结果，从而减少构建时间。 使用构建工具的持久化缓存策略，将编译过程中生成的中间文件或依赖信息缓存到本地磁盘，以便下次构建时进行增量更新。 合理配置构建工具的缓存选项，如指定缓存路径、设置缓存策略等。 ES6常用语法
在回答这个问题时，可以列举一些ES6常用语法，如箭头函数、解构赋值、模板字符串、展开运算符、Promise、async/await等。并可以举例说明其在实际开发中的应用场景和优势。
Vue中的keep-alive的作用和使用场景
在回答这个问题时，可以解释Vue中的
<keep-alive>组件的作用和使用场景：keep-alive组件用于缓存组件实例，以避免在组件切换时重复创建和销毁组件。可以用于优化频繁切换的组件，提高性能和用户体验。 适用于需要保留组件状态或避免重新渲染的场景，如Tab切换、列表滚动等。 Vuex的核心概念和作用
这个问题需要解释Vuex的核心概念和作用，即集中式状态管理库，用于管理Vue应用中的共享状态。
可以提到Vuex的核心概念包括state（状态）、mutations（变更状态的方法）、actions（异步操作状态）和getters（派生状态的计算属性）。 Vuex的作用是将共享状态抽离出来，方便统一管理和调度，实现不同组件间的状态共享和通信。 可以举例说明在大型项目或多个组件之间共享数据、状态同步等方面的应用场景。 Vue Router的导航守卫
在回答这个问题时，可以介绍Vue Router的导航守卫的作用和使用方法：
导航守卫用于在路由切换前、切换后或切换取消时执行相应的操作。 可以使用全局导航守卫、路由独享的守卫或组件内的守卫来控制路由跳转行为。 可以通过 beforeEach、afterEach、beforeEnter等方法定义导航守卫函数，并在函数中进行相应的逻辑处理，如权限验证、数据预加载等。Vue中的mixins是什么，有什么作用
这个问题需要解释Vue中的mixins的概念和作用：
mixins是一种复用组件逻辑的方式，可以将一些通用的选项对象混入到多个组件中。通过使用 mixins，可以实现代码的重用和组件间逻辑的共享。可以在 mixins中定义各种选项，如生命周期钩子、数据属性、计算属性、方法等，这些选项会被混入到组件中。在Vue中如何优雅地处理异步请求
在回答这个问题时，可以介绍一些在Vue中处理异步请求的常用技巧：
使用 axios等库发送异步请求，可以通过Vue的生命周期钩子（如created或mounted）来触发请求，并将响应数据保存到组件的data属性中。使用 async/await或Promise来处理异步请求，可以通过try/catch捕获异常，并在响应成功时更新组件中的数据。可以利用Vue的计算属性和 v-if指令来根据异步请求的状态显示不同的内容，如加载中、加载失败、加载成功等。
最后
再给我们的辅导服务打个广告，我们目前有面试全流程辅导、简历指导、模拟面试、零基础辅导和付费咨询等增值服务，大厂前端专家一对一辅导。
辅导服务推出了近 2 年的时间，已助力超过 200 + 的同学找到心仪的工作，感兴趣的伙伴可以联系小助手（微信号：interview-fe）了解详情哦~