前端基础知识

本文简要梳理了前端工程师必须掌握的 HTML/CSS、JavaScript、React 与 Vue 的基础知识点，适合初学者复习和查阅。

---

HTML与CSS

1. 动画transition和@keyframes的区别

一个是属性过渡，一个用于复杂多阶段动画。

2. 实现水平垂直居中

Flexbox: display: flex; justify-content: center; align-items: center;

3. 滑动下划线效果

.footer-info-left-hover::before {
  content: '';
  height: 2px;
  width: 100%;
  background-color: black;
  position: absolute;
  bottom: 0;
  transform: translate(-102%);
  transition: transform 0.3s ease;
}
.footer-info-left-hover:hover::before {
  transform: translate(0);
}

4. 事件冒泡与事件委托

前者是目标元素向上传播到DOM树，后者是利用冒泡原理，在父元素上监听子元素的事件。

5. 选择器优先级

!important > 内联样式 > ID选择器 > 类/属性/伪类选择器 > 元素/伪元素选择器

6. 盒模型

box-sizing的值： content-box（标准）：只含内容区域，总width=content-width+padding+border border-box：包含内容、内边距和边框。总宽度 = width (已包含 padding 和 border)

JavaScript

1. 数据类型

基本类型：Number、String、Boolean、Null、Undefined、Symbol、BigInt
引用类型：Object、Array、Function、Date 等

---

2. this 指向规则

• 默认：全局对象（严格模式下为 undefined）
• 方法调用：对象本身
• 构造函数：新创建的实例
• 箭头函数：不绑定 this，继承外部作用域

---

3. 闭包

函数 A 返回函数 B，B 中引用了 A 的变量。
闭包的作用：保留作用域、数据私有化

---

4. 原型链

对象访问属性时，如果本身没有，会向其原型对象（__proto__）查找，直到 null。

---

5. 防抖与节流

• 防抖 debounce：N 秒后执行，期间再次触发则重新计时（如搜索框）
• 节流 throttle：N 秒内最多执行一次（如滚动监听）

React

1. 状态管理

使用 useState 管理局部状态；使用 Context 或外部库（Redux、Zustand）管理全局状态。

---

2. 生命周期（函数组件）

• useEffect(() => {}, []) 相当于 componentDidMount
• useEffect(() => { return () => {} }, []) 相当于 componentWillUnmount

---

3. 虚拟 DOM 与 diff 算法

React 使用虚拟 DOM 提高渲染效率，更新时通过 diff 算法只对变化的部分进行真实 DOM 操作。

---

4. 组件通信

• 父传子：props
• 子传父：回调函数
• 兄弟组件：使用状态提升或 context

Vue

1. 响应式原理

Vue2 使用 Object.defineProperty 劫持属性
Vue3 使用 Proxy 实现更完整的响应式，支持对象、数组等各种结构。

---

2. 生命周期钩子（Vue 3）

• onMounted：组件挂载后执行
• onUpdated：组件更新后执行
• onUnmounted：组件卸载前执行

---

3. 双向绑定

使用 v-model 实现，语法糖本质上是 :value + @input

---

4. 组件通信方式

• 父子通信：props / $emit
• 兄弟通信：mitt / eventBus
• 全局状态：Vuex（Vue2）/ Pinia（Vue3）

本文持续更新中，欢迎收藏、评论交流 😄