以前是没钱买「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店的服务,哈哈,给蔚来点赞, 下一篇总结二面。