上海蔚来-前端-一面面经（附答案）

算法+八股+项目共40分钟左右

算法

力扣20题，有效的括号。

给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。

八股

1. flex 里的主轴和侧轴是什么？

   主轴是 flex 布局的主要轴线，由 flex-direction 定义，有 row （默认，水平从左到右）, row-reverse （水平，从右到左）, column （垂直，从上到下）, column-reverse （垂直，从下到上）

   侧轴是主轴垂直的轴线，侧轴方向由主轴自动设置。

2. flex 代表什么？flex: 1 代表什么？

   flex 是一个简写属性，用于设置弹性项目如何分配剩余空间。它是 flex-grow，flex-shrink 和 flex-basis 的简写。

   flex: 1 实际上是 flex-grow: 1; flex-shrink: 1; flex-basis: 0; 的简写。这意味着该项目将尽可能地增长，占据可用的空间，并在空间不足时进行收缩。

3. async 和 await 是什么？

   async 和 await 是ES8提出的基于Promise解决异步的最终方案，让异步代码像同步代码一样 async 是函数的修饰符，返回一个promise 对象，结果由 async 修饰的函数返回值决定。 await 必须写在 async 中，await 右侧表达式一般为 promise 对象，一般返回 promise 成功的值。如果 await 的 promise 失败，则会抛出异常，需要使用 try...catch 捕获

4. 如果 await 返回失败的 promise，一定要用 try...catch 接收吗？如果有多个 await怎么才能不阻塞主进程代码的执行？能不能用 Promise.all ？

   一般建议使用try...catch 接收，防止未捕获的异常影响程序运行。如果有多个 await 操作并且不希望阻塞主进程，可以使用 Promise.all 并行执行多个异步操作。

   async function fetchMultipleData() {
     try {
       const [data1, data2, data3] = await Promise.all([
         fetch('https://api.example.com/data1').then(res => res.json()),
         fetch('https://api.example.com/data2').then(res => res.json()),
         fetch('https://api.example.com/data3').then(res => res.json())
       ]);
       return { data1, data2, data3 };
     } catch (error) {
       console.error('Error fetching data:', error);
     }
   }
   

5. 什么是轮询？如果页面上有一份数据需要持续刷新，我们要轮询等待页面完成这个数据处理，此使怎么做？

   轮询是一种定期发送请求以检查某个状态或获取数据的技术。在页面上实现轮询，可以使用 setInterval 函数，每 n 秒检查一次

6. cookie 和 session 之间有什么不同？使用 session 的时候需要用到 cookie 吗？

   cookie：存储在客户端浏览器中的小数据文件，可以跨会话存在，通常用于保存用户偏好、登录状态等信息。cookie 可以设置过期时间。

   session：存储在服务器端的一种会话机制，用户访问网站时生成的唯一会话标识（session ID）保存在 cookie 中。session 数据保存在服务器端，浏览器关闭后 session 也会失效。

7. 说说 sessionStorage 和 localStorage 之间的区别？

   sessionStorage：在一个浏览器会话中有效的数据存储，页面刷新后数据仍然存在，但关闭浏览器或标签页后数据就会消失。

   localStorage：持久化存储数据，除非通过 JavaScript 删除，否则数据会一直存在，即使关闭浏览器也不会消失。

8. 说说 Vue3 组件通信的方法？v-model: 的原理是什么？

   父传子：

   • props：父传子通过 :props="" 和 definedProps(['props'])；子传父属性值通过从父组件收到的方法传递回去

   • v-model：

     组件内部 v-model 的本质

     <!-- 使用v-model指令 -->
     <input type="text" v-model="userName">
     
     <!-- v-model的本质是下面这行代码 -->
     <input 
       type="text" 
       :value="userName" 
       @input="userName =(<HTMLInputElement>$event.target).value"
     >
     

     组件通信的 v-model 本质：:moldeValue ＋ update:modelValue 事件

     父组件：

     <!-- 组件标签上使用v-model指令 -->
     <Child v-model="userName"/>
     
     <!-- 组件标签上v-model的本质：发送并接收数据 -->
     <Child :modelValue="userName" @update:model-value="userName = $event"/>
     

     子组件： defineProps() 接收，defineEmits() 发送

     <template>
       <div class="box">
         <!--将接收的value值赋给input元素的value属性，目的是：为了呈现数据 -->
     	<!--给input元素绑定原生input事件，触发input事件时，进而触发update:model-value事件-->
         <input 
            type="text" 
            :value="modelValue" 
            @input="emit('update:model-value',$event.target.value)"
         >
       </div>
     </template>
     
     <script setup lang="ts" name="AtguiguInput">
       // 接收数据
       defineProps(['modelValue'])
       // 声明事件，在上面的@input触发事件，发送数据
       const emit = defineEmits(['update:model-value'])
     </script>
     

   • ref和refs，子组件用 defineExpose() 暴露，父组件通过 ref() 可以进行修改，refs() 包含了所有子组件，可以一次性修改数据

   • 默认插槽，具名插槽：<slot>默认内容</slot>，<slot name="s1"></slot>

   子传父：

   • props
   • 自定义事件 $event：父组件自定义事件，通过 @method="" 给子组件绑定；子组件通过 defineEmits() 获得自定义事件，使用 @click=emit() 给父组件传递数据
   • v-model
   • parent，子组件通过@click="myfunc($parent)"修改parent数据
   • 作用域插槽：子组件通过 slot 发送 <slot :youxi="games" a="hhhh"></slot>，父组件 v-slot 接收所有参数对象<template v-slot="params">，

   祖孙：

   • $attrs，需要经过儿子，儿子直接用 v-bind="$attrs" 向孙子传递
   • provide，inject：爷用 provide 提供数据，孙用 inject 接收数据

   任意：

   • mitt：安装包，接收数据的组件提前绑定好事件 emitter.on()，提供数据的组件合适时触发事件 @click=emitter.emit()
   • pinia：集中式管理，实现任意组件通信，核心：state, action, getter，相当于组件中的data，methods，computed

   吐槽：组件通信内容太多了。。。实际开发最常用的就只有 props、自定义事件和 pinia

项目

1. 出于什么动机做的项目？
2. 路由鉴权使用的是什么方法实现的？
3. echarts 用的是哪个版本？主要设置是什么？
4. 项目遇到的难点有哪些？
5. 在 response header 响应头里面有哪些常见的属性？
6. status 有哪些状态？

其他

1. 平时如何学习前端？
2. 你有什么想问的？