懂车帝一面
- 为什么选择前端
- ocr组件中，抽象逻辑和配置，具体讲讲
- 项目当中有实现一些什么组件？
- 表单组件的实现
- interface和type的区别和使用场景
interface主要用于描述数据结构（如对象和类），支持被合并声明；
type是一个更为通用的类型别名，可以标识任何类型
具体见[[前端面试常见题-JS篇]]
- 实习当中学习到的东西
- React中性能优化的策略
useMemo, React.memo, useCallback等
- 为什么Vue当中没有
setup只挂载一次
- Vue3 的组合式和 React hooks的区别
React hooks在每次渲染时重复执行；
Vue3 composition API setup只在组件创建时执行一次
| 特性 | Vue 3 Composition API | React Hooks |
|---|---|---|
| 核心原理 | 基于 Proxy 的细粒度响应式系统 | 基于 VDOM 和函数重新执行 |
| 执行时机 | setup 只执行一次 | 组件函数在每次渲染时都执行 |
| 状态管理 | ref, reactive (可变数据) | useState (不可变数据) |
| 依赖追踪 | 自动 (大部分情况) | 手动 (通过依赖数组) |
| 闭包问题 | 几乎没有，因为 setup 只执行一次 | 常见，需要用 useCallback, useRef 等解决 |
| 代码风格 | 更接近声明式，定义状态和它们之间的关系 | 更接近函数式，描述每次渲染应该做什么 |
| 学习曲线 | 响应式系统需要理解，但 API 更简单直观 | Hooks 规则和依赖数组是主要难点 |
- React Query
见[[我们为什么要使用React Query]]
- ts的工具类
最常用的（针对对象类型的）：
Partical<Type>: 将Type的所有属性变为可选的；
Required<Type>: 将Type的所有属性变为必需的；
Readonly<Type>: 将Type的所有属性变为只读的；
Pick<Type, Keys>: 从Type中挑选出Keys指定的一组属性，创建一个新类型；
Omit<Type, Keys>: 从Type中忽略出Keys指定的一组属性，创建一个新类型；
Record<Type, Keys>: 创建一个对象类型，属性键为Keys，属性值为Type；
针对函数和Promise的
Parameters<Type>: 获取函数类型Type的参数类型，放在元组中
ReturnType<Type>: 获取函数类型Type的返回值类型
- CSS3的新特性
1. 选择器 (Selectors)
CSS3 引入了更强大、更具表现力的选择器，让你能更精确地定位元素，而无需添加额外的 class 或 id。
- 属性选择器增强:
[attr^="value"]: 选择attr属性值以 “value” 开头的元素。[attr$="value"]: 选择attr属性值以 “value” 结尾的元素。[attr*="value"]: 选择attr属性值包含 “value” 的元素。
- 结构伪类选择器:
:nth-child(n): 选择其父元素下的第 n 个子元素。:nth-of-type(n): 选择其父元素下特定类型的第 n 个子元素。:first-child,:last-child: 选择第一个/最后一个子元素。:only-child: 选择没有兄弟元素的元素。:empty: 选择没有子元素（包括文本节点）的元素。
- UI 元素状态伪类:
:enabled,:disabled: 选择启用/禁用的表单元素。:checked: 选择被选中的单选框或复选框。
2. 盒模型与边框 (Box Model & Borders)
border-radius(圆角): 无需图片即可创建圆角。box-shadow(盒子阴影): 为元素添加内阴影或外阴影。border-image(边框图片): 使用图片作为元素的边框。box-sizing: 改变 CSS 盒模型的计算方式。border-box是一个革命性的值，它让元素的width和height包含了padding和border，极大简化了布局计算。
3. 背景 (Backgrounds)
background-size: 控制背景图片的尺寸（如cover,contain）。background-origin: 指定背景图片定位的参考区域（padding-box,border-box,content-box）。background-clip: 指定背景图片的绘制区域。- 多重背景: 可以在一个元素上应用多个背景图片。
4. 颜色与渐变 (Colors & Gradients)
- RGBA 和 HSLA 颜色: 增加了 Alpha 透明度通道。
rgba(255, 0, 0, 0.5)表示半透明的红色。 opacity: 设置整个元素（包括内容）的透明度。- 线性渐变 (Linear Gradients):
linear-gradient() - 径向渐变 (Radial Gradients):
radial-gradient()
5. 文本与字体 (Text & Fonts)
text-shadow: 为文本添加阴影。word-wrap/overflow-wrap: 控制长单词或 URL 的换行。text-overflow: 当文本溢出时，用省略号（...）显示。@font-face: 允许在网页中嵌入自定义字体，极大地丰富了网页的字体选择
6. 2D/3D 转换 (Transforms)
允许对元素进行移动、旋转、缩放和倾斜，而不会影响正常的文档流。
transform:translate(x, y): 移动。rotate(angle): 旋转。scale(x, y): 缩放。skew(x-angle, y-angle): 倾斜。
- 3D 转换:
translate3d,rotateX,rotateY,perspective等，可以创建 3D 效果。 transform-origin: 设置转换的基点。
7. 过渡 (Transitions)
当元素的某个 CSS 属性值改变时，可以平滑地过渡，而不是瞬间完成。
transition: 一个简写属性，用于设置transition-property,transition-duration,transition-timing-function,transition-delay。
8. 动画 (Animations)
通过 @keyframes 规则，可以创建更复杂的、基于关键帧的动画。
@keyframes: 定义动画的各个阶段（帧）的样式。animation: 将@keyframes定义的动画应用到元素上，并设置动画名称、时长、速度曲线、延迟、次数、方向等。
9. 布局 (Layout)
这是 CSS3 最具革命性的部分，提供了强大的新布局模型。
- 弹性盒子布局 (Flexbox):
- 一维布局模型，非常适合构建组件和复杂的对齐。
- 核心属性:
display: flex,flex-direction,justify-content,align-items,flex-grow,flex-shrink。
- 网格布局 (Grid):
- 二维布局模型，可以同时控制行和列，是构建复杂网页整体布局的利器。
- 核心属性:
display: grid,grid-template-columns,grid-template-rows,grid-gap。
- 多列布局 (Multi-column Layout):
- 像报纸一样，将内容排成多列。
- 核心属性:
column-count,column-gap,column-rule。
10. 响应式设计 (Responsive Design)
- 媒体查询 (Media Queries): 允许你根据设备的特性（如视口宽度、屏幕分辨率、方向等）来应用不同的 CSS 规则。这是实现响应式设计的基石。
- 三列布局和Promise