记录蘑菇头第一次面试

蘑菇头爱平底锅
1,373 阅读3分钟

前言

从4月份到现在，蘑菇头学习前端已经持续近4个月了。从js到Vue，从数据结构到算法，孩子也是一把鼻涕一把泪哇。今天也是终于约到一家面试了，由于蘑菇头没有面试经验，导致这次面试只面了不足半个小时就寄了，赶紧把这次面经与小伙伴们分享一下。

自我介绍

这次面试上来就是一个自我介绍，和我想象的面试一样，所以自我介绍这块我觉得我聊的还行。蘑菇头按照我是谁找什么工作以及为什么能胜任来回答的。

这是我回答的：首先我叫wzm，是一名大三在读学生，希望找一份前端开发实习的工作，前端方面自学了html，css，js，主要用Vue快速搭建项目模块，用Tailwind加速css开发，进行项目开发，react也在学习过程中，后端方面是node.js+MySQL。自己也在看《你不知道的JavaScript》和《JavaScript语言精粹》这些书籍，ai方面也是积极跟进，在项目中用到了OpenAi的相关接口实现了一些功能。

差不多就是这样，有什么不足之处指导一下。

面试

接下来就是面试题了。上来就是问我的项目，蘑菇头心碎了，因为我现在写的项目还在开发过程中，功能还不够完善，再加上蘑菇头第一次面试，没有准备好，所以项目这方面聊得不是很好。最好把项目部署上线，这样方便面试官查看。

接下里就是一些八股文。

axios你是怎么封装的

为什么要封装？

简化调用，更方便地调用 API 接口，减少每次请求时都需要设置相同参数

配置统一，如基础 URL、超时时间、请求头信息

功能增强，请求和响应拦截器，用来做一些额外的事情

回答：封装的比较简单，就配置了一些基本配置，然后做了请求和响应拦截，在请求拦截里面做了在请求头里面设置了token，在响应拦截里面统一了响应状态。

Vue组件通信

Vue提供了多种方式来进行组件间的通信，这些方式的选择取决于通信的需求和组件之间的关系。

当存在父子关系时：

Props 和 Events

Props：父组件通过 props 向子组件传递数据。

Events：子组件通过自定义事件 $emit 向父组件发送数据。

当多个组件需要共享状态时：

Vue、Pinia

全局中心化的状态存储，任何组件都可以从中读取状态或触发状态的变化。

当需要跨层级组件通信时：

依赖注入 (Provide/Inject)

跨层级组件：允许祖先组件向其所有子孙后代注入一个值，而不管组件层次有多深。

路由传参

在Vue中，路由传参有两种方式，params和query

params

声明式路由跳转

// 在模板中
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

// 在 JS 中
this.$router.push({ name: 'user', params: { userId: 123 }});

编程式路由跳转

this.$router.push({ path: '/user/123'});

路由配置

{
  path: '/user/:userId',
  name: 'user',
  component: UserComponent
}

query

声明式跳转

<router-link :to="{ path: '/search', query: { keyword: 'Vue' }}">Search</router-link>

编程式路由跳转

this.$router.push({ path: '/search', query: { keyword: 'Vue' }});

或者直接指定完整路径

this.$router.push('/search?keyword=Vue');

路由配置

{
  path: '/search',
  name: 'search',
  component: SearchComponent
}

使用注意事项

  • 刷新问题：
    • params 传参在刷新页面后可能会丢失，因为它们不在 URL 中显示。如果需要在刷新后仍然保留参数，建议使用 query 传参。
    • query 传参则始终在 URL 中可见，因此刷新后仍能获取到这些参数。
  • 获取参数：
    • 在目标组件中，你可以通过 this.$route.params 和 this.$route.query 来获取对应的参数。
  • 传递对象：
    • 如果需要传递复杂的对象，建议使用 query 传参，因为 params 传参不支持直接在 URL 中传递复杂类型。

在登录时，用户信息存在哪里？

以下是一些常见的存储用户信息的方式：

sessionStorage或localStorage

客户端存储

缺点：安全性低

Cookies

客户端存储：将用户信息或一个唯一标识符存储在 Cookie 中。

缺点：Cookie 大小有限制（通常不超过 4KB），并且每次 HTTP 请求都会携带 Cookie，可能会增加带宽消耗。

Server-Side Sessions

服务端存储：在服务器端为每个用户创建一个唯一的会话 ID，并将其存储在客户端的 Cookie 中。安全性高。

jwt

客户端存储：使用 JSON Web Tokens (JWT) 存储用户信息或权限，并将 JWT 存储在客户端（如 localStorage）。

还有一些问题没有记录到，有时间再整理一下。

avatar
文章
阅读
粉丝