From 75a78e7c971d7902ac891d6a8e97ea5b9987fc84 Mon Sep 17 00:00:00 2001 From: doit01 Date: Fri, 20 Mar 2026 09:46:06 +0800 Subject: [PATCH 01/14] Create front --- front | 410 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 410 insertions(+) create mode 100644 front diff --git a/front b/front new file mode 100644 index 00000000..595cf71b --- /dev/null +++ b/front @@ -0,0 +1,410 @@ +JavaScript 篇 +1. 说说JavaScript中事件循环(Event Loop)的执行顺序? +考察点: 异步编程、宏任务与微任务、代码执行结果分析。 +答案: +JavaScript是单线程的,事件循环是其处理异步回调的机制。执行顺序如下: + +执行当前调用栈中的同步代码(也就是宏任务,如整个script)。 + +执行完同步代码后,检查微任务队列,如果有微任务(如 Promise.then、MutationObserver、queueMicrotask),则清空整个微任务队列。 + +从宏任务队列中取出一个任务执行(如 setTimeout、setInterval、I/O)。 + +执行完一个宏任务后,再次检查并清空微任务队列。 + +重复此过程,这就是事件循环。 + +面试必杀技: 可以顺便举例 console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); 的输出顺序是 1, 4, 3, 2 。 + +2. 什么是闭包?在实际项目中有什么用? +考察点: 作用域链、内存泄漏、模块化思想。 +答案: +闭包是指一个函数能够访问其外部函数作用域中变量的能力(即使外部函数已经执行完毕)。 +实际应用场景: + +防抖/节流函数: 需要保存 timer 定时器 ID,防止被污染。 + +Vue3 / React Hooks: 为什么 Hooks 能记住上一次的状态?底层原理依赖了闭包。 + +创建私有变量: 模拟私有方法,实现数据隐藏和封装。 + +避坑: 闭包使用不当可能导致内存泄漏(因为变量一直被引用,无法被垃圾回收)。解决方法是在不需要使用时,将引用置为 null 。 + +📘 TypeScript 篇 +3. 说说interface(接口)与type(类型别名)的区别? +考察点: 类型系统、扩展方式、使用场景。 +答案: +两者在多数情况下可以互换,但核心区别在于: + +扩展方式: interface 使用 extends 继承,type 使用 & 实现交叉类型(联合类型)。 + +重复定义: interface 支持声明合并(重名时会自动合并属性),而 type 不允许重复定义。 + +适用范围: type 更灵活,可以定义原始类型(type Name = string)、联合类型(type ID = string | number)和元组。interface 更适合用于定义对象的形状,尤其是在面向对象编程或定义类的契约时。 + +面试官追问: 如果是写Vue3组件库或库文件,推荐用 interface 还是 type?通常对于对外暴露的API,优先用 interface,因为它更稳定且支持声明合并,方便用户扩展 。 + +4. 什么是类型守卫?如何自定义? +考察点: 类型收缩、is 关键字。 +答案: +类型守卫是一种在运行时检查以确保某个值属于特定类型的行为,它帮助TS在特定代码块中将变量推断为更具体的类型。 + +内置守卫: typeof、instanceof、in 操作符。 + +自定义守卫: 通过返回一个 参数名 is 类型 的谓词函数。 + +typescript +// 自定义守卫,判断是否是数组 +function isArray(value: any): value is any[] { + return Array.isArray(value); +} + +function foo(value: string | string[]) { + if (isArray(value)) { + value.map(···); // 在此作用域内,TS 能确定 value 是数组类型 + } +} +``` [citation:7] + +### 🧩 Element Plus 篇 + +#### 5. 如何自定义Element Plus的主题色? +**考察点:** 样式覆盖、SCSS变量、工程化配置。 +**答案:** +Element Plus 支持灵活的样式定制,主要有两种方式: +1. **仅替换颜色(简单项目):** 在 `vite.config.js` 或 `vue.config.js` 中,通过配置 `scss` 预处理器选项,覆盖 Element Plus 内部定义的 SCSS 变量,例如 `$--color-primary: #409EFF;` 改为自定义的颜色。 +2. **全量样式覆盖(复杂项目):** 使用官方提供的主题生成工具,或者创建一个自定义的 SCSS 文件,引入 Element Plus 的 SCSS 变量文件,并在引入前修改所有需要覆盖的变量。 + +#### 6. 说说你在使用El-Table时,遇到过哪些性能问题?怎么解决的? +**考察点:** 大数据渲染、虚拟滚动、树形表格。 +**答案:** +当表格有上千行数据时,直接渲染会导致页面卡顿甚至崩溃,因为浏览器 DOM 节点过多。 +**解决方案:** +1. **分页:** 最简单有效的方式,前端分页或后端分页。 +2. **虚拟滚动:** Element Plus 的 Table 组件支持虚拟滚动(需设置 `v-virtual-scroll` 指令或结合 `el-table-v2` 虚拟化表格组件)。它只渲染可视区域内的数据行,极大减少 DOM 节点数量。 +3. **按需加载:** 如果是树形表格,使用懒加载模式,展开时再去请求子节点数据。 + +### 🎨 Tailwind CSS 篇 + +#### 7. Tailwind CSS相比传统CSS最大的区别是什么? +**考察点:** 原子化CSS、实用优先、可维护性。 +**答案:** +最大的区别在于**开发思想**的不同: +* **传统CSS(语义化):** 我们倾向于先起一个类名(如 `.user-card`),然后在 CSS/SCSS 文件里定义这个类有哪些样式。 +* **Tailwind(原子化/实用优先):** 它提供大量的工具类(如 `flex`、`pt-4`、`text-center`),直接在 HTML/组件中组合这些类来实现样式,而不用离开模板去写自定义 CSS。 +* **优势:** 避免了命名焦虑,减少了 CSS 文件体积(通过 PurgeCSS 摇树优化),样式与组件耦合更紧密,修改样式不用在多个文件间跳转 [citation:8]。 + +#### 8. 在Tailwind中,如何复用一组复杂的样式类? +**考察点:** `@apply` 指令、组件抽象、代码复用。 +**答案:** +虽然 Tailwind 鼓励在模板中直接使用类,但当一组样式重复出现时,主要有两种复用方式: +1. **组件抽象(推荐):** 如果是前端框架(如 Vue/React),可以将这组样式封装成一个单独的组件(如 `BaseButton.vue`),然后在各处引用该组件。 +2. **使用 `@apply` 指令:** 在你的 CSS 文件中,可以通过 `@apply` 将多个工具类组合成一个自定义类。 + ```css + .btn-primary { + @apply py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700; + } +这种方式适合需要兼容传统思路或在特定情况下简化类名列表 。 + +💼 综合场景题 +9. 用Element Plus的Table组件展示数据,如何实现某一列根据条件显示不同颜色的Tag? +考察点: 作用域插槽、动态类绑定、状态切换。 +答案: +这属于典型的自定义列模板场景。 + +在 el-table-column 中使用 v-slot 作用域插槽,获取当前行数据 row。 + +根据 row 中的状态字段(如 status),动态绑定 el-tag 的 type 属性或自定义类名。 + +vue + + + +10. 在Vue3 + TypeScript项目中,如何为Element Plus的组件实例添加类型声明? +考察点: 类型导入、InstanceType、组件引用。 +答案: +在 Vue3 中使用