秋招面经:蔚来发车

815 阅读5分钟

以前是没钱买「BBA」,现在还是没钱,买「BBA」。国产电车如此强大,家里也想从宝马换成蔚来。作为准车主,经历蔚来的面试、收简历、一面、二面,最终拿到offer,这一过程仿佛享受了4S店的待遇。感谢面试官,让我感受一把提offer等于提车....

蔚来面经

  • 组件设计题:一个父组件包含两个子组件,父组件包含一个响应式变量count,子组件1完成add按钮功能,2显示count的值。
<template>
  <div>
    <ChildComponent1 @add="incrementCount" />
    <ChildComponent2 :count="count" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent1 from './ChildComponent1.vue';
import ChildComponent2 from './ChildComponent2.vue';

// 定义一个响应式的 count 变量
const count = ref(0);

// 定义一个方法来增加 count 的值
const incrementCount = () => {
  count.value++;
};
</script>

<template>
  <button @click="handleAdd">Add</button>
</template>

<script setup>
// 定义一个点击事件处理器
import { defineEmits } from 'vue';

const emits = defineEmits(['add']);

const handleAdd = () => {
  emits('add');
};
</script>
<template> 
    <div>Count: {{ count }}</div> 
</template> 
<script setup> 
import { defineProps } from 'vue'; 
defineProps({ count: { type: Number, required: true } }); 
</script>

组件设计题是大厂常考题,本题考查父子组件通信,比较简单,爽。

  • "axios":"^1.7.5" 中的^是干啥用的?

^1.7.5" 表示的是可以接受的最小版本是1.7.5,最大版本则是不包括任何主版本号增加的版本,比如1.8.0, 1.9.0等都是可接受的,但2.0.0则不可以。这样可以在确保包向后兼容的同时,让你的应用能够受益于新版本中的修复和改进。

1.7.5 三个版本的意义是 1是大版本,表示有重大更新,比如vue2 升级到vue3。第二个版本用于本本版本里的一些新增特性,最后一个版本,当出现bug时,及时推出小版本改bug。

这道考题比较刁钻,属于实战中的小知识点,但在历年大厂面试题中有多次出现,大家翻看我的以往面经就好。如果有帮助,欢迎赏个赞。

  • 按钮屏幕居中
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>居中按钮</title> <link rel="stylesheet" href="styles.css"> </head> 
<body> 
    <div class="center"> 
        <button>点击我</button> 
    </div> 
</body> 
</html>
body, html {
    height: 100%; /* 确保body和html的高度为100%,以便使用vh单位 */
    margin: 0; /* 移除默认边距 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw; /* 视口宽度 */
    height: 100vh; /* 视口高度 */
}

button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    outline: none;
    border-radius: 5px;
}

蔚来的面试官很友善啊,题目不难。

  • axios使用、以及对该异步函数的异步处理

Axios 是一个基于Promise的HTTP请求库,用于浏览器和node.js,支持JSON数据格式自动转换,具有XSRF保护等功能。

这个介绍比较高级。首先,手写xhr封装麻烦,fetch要手动json(), 需要一个promisify 友好的http 请求库,axios 风生水起。其次,它作为http请求库,前后端通用(后端可以用它发起web service 服务调用)。它会自动将json对象序列化,或对结果JSON化。还可以方便的通过请求拦截,做好xsrf(跨站脚本攻击),token登录校验等(带上头信息)

const instance = axios.create();

// 添加一个请求拦截器
instance.interceptors.request.use(config => {
  // 从localStorage中获取token
  const token = localStorage.getItem('token');
  // 如果存在token,则添加到请求头中
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 请求错误时做一些事
  return Promise.reject(error);
});
  • 数组[1,2,3,4,5]转换为对象数组[{key:1,alue:1},{key:2,yalue:4}….]

es6 map的考察,简单!

const numbers = [1, 2, 3, 4, 5]; 
const objectArray = numbers.map((number) => ({ key: number, value: number })); 
console.log(objectArray); // 输出: [{ key: 1, value: 1 }, { key: 2, value: 2 }, { key: 3, value: 3 }, { key: 4, value: 4 }, { key: 5, value: 5 }]
  • 常见状态码
状态码描述应用场景
200 OK请求已成功,请求所希望的响应头或数据体将随此响应返回。用户访问一个网页,服务器成功返回网页内容。
201 Created请求已成功,需要通过Location头来获取新建的资源。用户提交表单创建新记录,服务器创建成功并返回新记录的位置。
301 Moved Permanently请求的资源已被永久移动到新位置。网站域名变更,旧URL重定向到新URL。
302 Found (Temporary Redirect)请求的资源临时从不同的URI响应请求。登录表单提交后,重定向到主页。
304 Not Modified请求的资源没有改变经常使用ETag机制来更精确地控制缓存行为
307 Temporary Redirect请求应该被临时重定向到另一个URI307保留了原始请求的方法和请求体,而302在某些情况下可能会将POST请求转换为GET请求,这可能导致安全性问题
400 Bad Request服务器无法理解请求的格式,客户端不应再使用相同的格式重复此请求。用户提交的数据格式不正确。
401 Unauthorized请求要求用户的身份认证。用户尝试访问需要登录才能查看的内容。
403 Forbidden服务器理解请求客户端的请求,但是拒绝执行此请求。用户试图访问未经授权的内容。
404 Not Found请求失败,请求所希望得到的资源未被在服务器上发现。用户访问不存在的页面。
500 Internal Server Error最普通的服务器端错误,服务器遇到了一个未曾预料的情况,导致了它无法完成对请求的处理。服务器遇到未知错误,无法完成请求。
503 Service Unavailable服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。服务器正在进行维护,暂时无法处理请求。

www.baidu.com -> www.baidu.com

image.png

304 用的头

image.png

  1. If-Modified-Since 和 Last-Modified
  2. If-None-Match 和 ETag

总结

一面还是比较友善的,不难。感觉到蔚来品牌高级4S店的服务,哈哈,给蔚来点赞, 下一篇总结二面。