前端面试和一些建议

起名时在学Aiifox

已于 2024-05-04 11:22:44 修改

阅读量967

点赞数 31

文章标签：面试职场和发展 vue.js 前端

于 2024-04-30 10:53:57 首次发布

本文链接：https://blog.csdn.net/qq_51846847/article/details/138336404

版权

最近公司在招前端，我有跟着一起参与面试。我们主要负责面试的人，不会问那些什么闭包，原型链，他觉得那些东西在我们日常开发中用不到，问的基本都是一些工作中的问题。这些问题不是每次都问，但也就问这些了。我这里记录一下并且碎碎念一下。

因为我工作经验比较少，所以会比较注意项目职责中做的性能优化和适配，，还有优化底层逻辑。比如简历里的项目职责有写“针对小程序的性能进行优化，包括但不限于页面加载速度、交互流畅度等方面，并确保小程序在不同平台和设备上的兼容性”，“通过代码压缩、资源合并、缓存优化等手段提高网站或应用的加载速度和性能，提升用户体验”等。

我都会对这些进行提问，因为我在工作中没有做过这方面的工作，也比较感兴趣，但问的大部分面试者都回答不上，所以我的建议是项目职责写了的就一定要回答的上来，不然就不要写，强烈建议，不然你尴尬，我也有点尴尬。

还有就是男生不要留长指甲，面试了一个男生，指甲非常长，十个都长，就是和女生弄了甲片的长度一样长，然后也不修，没有甲型，就是真的会因为这个原因而不录取。

嗯，还有就是如果能力不达标，简历就写（包装？）的不要那么好，我看了一个小姐姐的简历，我还和另一个前端说，这个小姐姐应该可以，但在面试过程中，问的都是她简历里的工作职责，她都回答不上来，然后就问她如果自己在vue里封装一个弹窗，要怎么做，结构应该是什么样的，也回答不上来，就，我也不知道该怎么说了。

还有就是，我面试的话都会自己带一份简历以备不时之需，但面试的大部分面试者，都俩手空空，是只有我这样吗？emmm,不知道了。

我觉得我们的问题真的很人性化，不需要你死记硬背那些面试题，就问的都是平时工作中遇到的，和简历里自己提到的。希望大家和我以后面试都可以顺利通过，面试成功。我会对这些问题回答一下如果是我自己的话，怎么回答。（ps:我自己的工作经验还没有一年，就是我也不是大佬，是小白，有什么错误可以提出指正，仅供参考啊）嗯，希望有帮助到你？

你可以自己搭建项目吗？从什么开始入手
工作中遇到过最大的bug？
工作这么长时间有什么值得说的项目？
有对项目的目录进行过优化吗？
写一个项目会考虑那些问题？
近期有学到什么新的知识吗？
对现在智能化的东西有了解吗？
对后面的职业规划？
使用过pinia吗？常用的API？使用场景？
知道递归吗？使用场景？
知道或使用过hooks吗？使用场景
使用过echarts吗？有在echarts的基础上做过改动吗？
var,const,let的区别，const不可以改变吗？
js中的异步操作有那些？
ref与reactive的区别与使用场景？
平时会在什么地方学习新知识？
对我们公司或对我们部门有什么想了解的？

对你有帮助吗？有的话点个赞或者收藏吧.

你可以自己搭建项目吗？从什么开始入手?

我在工作中还没有，基本公司都有模板。但如果我回答的话，可能会这么说，如下

首先就是需求分析，会选择合适的技术栈，是vue2还是vue3,项目初始化，构建工具是使用vite还是Webpack.使用什么UI框架或组件库，封装axios请求，然后确定路由是动态还是静态的等。

有对项目的目录进行过优化吗？

我没有，但我去网上找了一下，

我采用了模块化的开发方式，将代码拆分为独立的模块或组件。这不仅提高了代码的可重用性，还使得项目的目录结构更加清晰。

我还遵循了命名规范，为文件和目录选择了有意义的名称。良好的命名习惯使得项目的目录结构更加易读易懂。

在资源管理方面，我合理管理了项目中的静态资源，并将不同类型的资源放置在不同的目录中。这有助于提高项目的可维护性。

我还对项目的构建流程进行了优化，使用构建工具进行自动化构建、代码压缩、文件合并等操作，以提高构建过程的效率和可靠性。

最后，我定期审查和优化项目的目录结构，以适应新的需求和最佳实践。我相信持续的优化工作可以提高项目的质量和开发效率。

写一个项目会考虑那些问题？

需求分析：在开始编写项目之前，首先需要对项目的需求进行全面的分析和理解。这包括确定项目的功能、目标用户、用户需求、技术需求等。只有清楚地了解项目的需求，才能有针对性地进行后续的规划和开发。

技术选型：在确定项目的需求之后，需要根据项目的特点和需求选择合适的技术栈。这包括选择前端框架（如React、Vue.js、Angular等）、构建工具（如Webpack、Parcel等）、状态管理库、UI组件库等。技术选型的合理性对项目的后续开发和维护具有重要影响。

项目架构设计：在确定了技术栈之后，需要对项目的架构进行设计。这包括确定项目的目录结构、模块划分、组件设计等。良好的项目架构设计能够提高项目的可维护性、可扩展性和性能。

数据设计：对于涉及数据操作的项目，需要进行数据设计，包括数据库设计、数据接口设计等。合理的数据设计能够保证数据的完整性、一致性和安全性。

安全性考虑：在编写项目时需要考虑安全性问题，包括防止XSS攻击、CSRF攻击、SQL注入等。合理的安全性设计能够保护用户数据和系统安全。

性能优化：项目上线后需要考虑性能优化问题，包括页面加载速度优化、资源压缩、缓存策略等。优化项目的性能能够提升用户体验和网站的排名。

跨平台兼容性：在编写项目时需要考虑跨平台兼容性，包括不同浏览器、不同设备的兼容性。合理的兼容性设计能够确保项目在不同平台上的正常运行。

测试策略：编写项目时需要考虑测试策略，包括单元测试、集成测试、端到端测试等。合理的测试策略能够提高项目的质量和稳定性。

使用过pinia吗？常用的API？使用场景？ai回答

我确实有使用过 Pinia，它是一个基于 Vue 3 的状态管理库，专门为 Vue 3 应用程序设计。Pinia 提供了一种简洁且优雅的方式来管理应用程序的状态，并且与 Vue 3 的响应式系统无缝集成。

在 Pinia 中，最常用的 API 包括：

defineStore：用于定义一个状态管理仓库（Store），通过该 API 可以定义状态、获取状态、修改状态等操作。

useStore：用于在组件中使用状态管理仓库，返回一个代表该仓库的实例，通过该实例可以访问仓库中定义的状态和方法。

createPinia：用于创建 Pinia 实例，可以通过该实例注册和管理应用程序中的所有状态管理仓库。

store.$state：用于访问状态管理仓库中的状态，可以直接在组件中通过 $state 访问状态。

store.$actions：用于访问状态管理仓库中的动作（Actions），可以通过 $actions 调用仓库中定义的动作。

store.$getters：用于访问状态管理仓库中的 getters，可以通过 $getters 获取仓库中定义的 getters。

store.$subscribe：用于在组件中订阅状态管理仓库中状态的变化，当状态发生变化时，会触发相应的回调函数。

store.$reset：用于重置状态管理仓库的状态，将状态恢复到初始值。

使用 Pinia 的场景主要包括：

大型应用程序：Pinia 适用于大型应用程序的状态管理，它提供了一种清晰且可维护的方式来管理应用程序的状态，使得代码结构更加清晰易懂。

跨组件状态共享：Pinia 支持在多个组件之间共享状态，可以在应用程序中方便地实现跨组件状态共享。

类型安全：Pinia 提供了类型安全的状态管理方案，可以有效地避免状态相关的错误，并提高代码的健壮性和可维护性。

Vue 3 生态集成：Pinia 是专为 Vue 3 设计的状态管理库，与 Vue 3 的响应式系统无缝集成，可以充分利用 Vue 3 的特性和生态系统。

总的来说，Pinia 是一个功能强大且易于使用的 Vue 3 状态管理库，适用于大型应用程序的状态管理，能够提高代码的可维护性和可测试性，是 Vue 3 应用程序开发中的一种理想选择。

或者

1. pinia 和 vuex 具有相同的功效，是 Vue 的存储库，它允许您跨组件/页面共享状态。2. 设计使用的是 Composition api，更符合vue3的设计思维。3. Pinia 对 Vue 2 和 Vue 3 都有效，并且不需要您使用组合 API

2、1 Vue2 和 Vue3 都能支持。2. 抛弃传统的 Mutation ，只有 state, getter 和 action ，简化状态管理库。3. 不需要嵌套模块，符合 Vue3 的 Composition api，让代码扁平化。4. TypeScript支持。5. 代码简介，很好的代码自动分割总结 : Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和对TypeSccript 的完美支持。

对现在智能化的东西有了解吗？

其实是想问对AI了解吗？比如说会用ChatGPT辅助写代码吗，我们前端想听到的是会，因为这样会觉得你是一个对新东西接受了比较高的人，不知道同样的问题其他的面试官想听到的答案是什么，但我觉得可以说会，有时候遇到一些代码上的问题可以找它解决，有ChatGPT,或者国内的讯飞星火等

var,const,let的区别，const不可以改变吗？

区别

var:

使用 var 声明的变量属于函数作用域或全局作用域（如果在函数外声明），而不是块级作用域。
var 声明的变量可以被重复声明，而且不会报错，这可能导致意外的覆盖。
声明提升：var 声明的变量会在其所在函数或全局范围内提升到函数或全局作用域的顶部，但初始化的值不会提升。

const:

使用 const 声明的变量是常量，一旦被赋值就不能再被修改。
声明 const 变量时必须进行初始化，否则会抛出 SyntaxError 错误。
const 声明的变量也具有块级作用域。

let:

使用 let 声明的变量具有块级作用域，只在声明的块级作用域内有效。
不允许重复声明同一变量，如果在同一作用域内重复声明同一变量，会抛出 SyntaxError 错误。
声明提升：和 var 不同，let 声明的变量在块级作用域内是不会被提升的。

const不可以改变吗？

因为你说const一旦赋值就不能被修改，进而引出这个问题

所以对于对象和数组等复合类型数据，const 只保证了变量指向的内存地址不会改变，而不是对象或数组本身的内容不可修改。

ps:书上是怎么说的
const PI = 3.14;
PI = 3; // Error: Assignment to constant variable.

const obj = { name: 'John' };
obj.name = 'Alice'; // No error, because only the property of the object is being modified, not the reference itself

console.log(obj); // { name: 'Alice' }

obj = { age: 30 }; // Error: Assignment to constant variable.
在上面的例子中，对于基本类型的常量，尝试重新赋值会导致错误。但是对于对象 obj，虽然我们不能重新赋值一个新的对象给 obj，但是我们可以修改对象的属性，因为对象的引用并没有改变。

平时会在什么地方学习新知识？

提问时也可能问会逛什么社区？记住，就是想问你有没有逛csdn什么的,有一个面试者不知道没听清还是怎么了，回答我们，平时比较宅，不怎么出去逛。

csdn,blili,知乎，掘金，github等，不要在回答没事干比较宅，不出去逛。

对后面的职业规划？

这个是肯定要在面试之前要想好的，这个问题应该是每次面试必问的吧？
如果你目前前端技术还不怎么样，就说近期把js所有都搞懂什么的，或者你对后端感兴趣，有Python也可以说后面想往全栈发展。比如我最近打算看一下那个javascript高级程序设计。

对基础知识了解加深一下，你也可以说对tree.js感兴趣，反正，吹嘛，一年两年以后不知道还在不在这个公司了呢。还有的面试者自学了nood.js，python说后面想自己一个网站，卖课什么的，反正这些目前我都不太懂，和另一个面试官聊的（全栈），反正就基于目前的能力对后面进行职业规划吧。

使用过pinia吗？常用的API？使用场景？

Pinia 是一个 Vue.js 状态管理库，相较于 Vuex 更加轻量级和直观。

常用的 API：

defineStore: 用于定义一个 store。
createPinia: 用于创建一个 Pinia 实例，通常在应用程序的入口文件中使用。
useStore: 用于在组件中使用指定的 store 实例。
store.state: 用于获取状态。
store.getters: 用于获取计算属性。
store.actions: 用于调用 actions。
store.mutations: 用于调用 mutations。

使用场景：

对于小到中型的 Vue.js 应用，Pinia 是一个优秀的状态管理选择，因为它相对于 Vuex 更加轻量级和直观。
当应用需要多个 store 实例时，Pinia 提供了更好的组织和管理方式。
如果你倾向于使用类似 React Hooks 的 API 来管理状态，Pinia 也是一个很好的选择。