以前是没钱买「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 | 请求应该被临时重定向到另一个URI | 307保留了原始请求的方法和请求体，而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
304 用的头
- If-Modified-Since 和 Last-Modified
- If-None-Match 和 ETag
总结
一面还是比较友善的，不难。感觉到蔚来品牌高级4S店的服务，哈哈，给蔚来点赞， 下一篇总结二面。
