当前位置：首页 > news >正文

【前端】基础知识类汇总（长期更新）

news 2026/5/11 21:40:00

一、基础类

1、BOM和DOM

使网页文档与浏览器进行交互，DOM主要关注文档结构及内容，BOM侧重与浏览器本身交互
DOM：文档对象模型，是HTML和XML文档的编程接口，由节点组成的层次结构，每个节点对应文档中的一个元素、属性、文本。
DOM操作即：增删改查节点，eg：getElementById\getElementByTagName……
BOM：浏览器对象模型，与浏览器窗口及功能进行交互的接口，提供了一些对象和方法，用于访问和操作浏览器的特性。
比如一些：窗口、导航、历史、位置等对象的操作，eg：获取窗口位置、调整窗口大小、刷新页面、获取当前URL、访问浏览器历史记录前进/后退……
应用场景：
通过DOM操作进行动态页面交互(动态显隐等)、表单处理(获取修改表单元素值)
通过BOM检测浏览器版本、分辨率、实现页面前进/后退导航

2、var、let、const

var：函数级作用域，有声明提升，可重复声明；
let：块级作用域，无声明提升，不可重复声明；
const：块级作用域，无声明提升，不可重复声明，声明时必须赋值，不能重新赋值 (引用类型可改属性)；

3、闭包

函数嵌套，内部函数访问外部函数变量。
滥用会造成内存泄漏
作用：私有化变量、缓存数据，模块化

4、promise、原型链

promise：可解决回调地狱，状态有pending、fullfilled、rejected
常用：then、catch、finally、Promise.all、Promise.race
原型链：每个对象有proto，函数有prototype，实例通过proto找原型，形成原型链

5、防抖、节流

防抖：最后一次触发后延迟执行（常用：搜索框）
节流：固定时间只执行一次（常用：滚动、resize）

6、深、浅拷贝

深拷贝：完全独立（常用：列表编辑行的表单和外层数据需深拷贝，不深拷贝，修改表单数据，外层列表也同样改了）
浅拷贝：只拷贝一层，引用类型共享

7、async/await、nextTick

原理：promise语法糖，基于Generator，await后跟Promise，同步写法写异步

8、本地存储

localStorage：永久，5M
sessionStorage：页面关闭消失
cookie：会随请求发送，有过期时间

9、this指向

普通函数：谁调用指向谁
箭头函数：继承外层this，无法改变
构造函数：指向实例
call/apply/bind：可强行改变

10、事件

事件循环：执行栈→微任务全部→宏任务一个
微任务：promise.then
宏任务：setTimeout、script、ajax

二、vue类

1、vue2和3区别

（1）响应式系统
vue2：使用Object.defineProperty实现响应式，无法检测新增/删除的属性；
vue3：改用Proxy，支持全属性响应式，包括数组和动态添加的属性。
（2）API
vue2：依赖选项式 API（data、methods等）；
vue3：引入组合式 API（setup函数），允许逻辑复用和更灵活的代码组织。
（3）vue3的性能优化
重写虚拟 DOM，优化 diff 算法，提升渲染性能。
支持多根节点组件（Fragment），无需额外包装标签。
将beforeDestroy和destroyed更名为beforeUnmount和unmounted。新增setup阶段替代beforeCreate和created。
支持 TypeScript 重写，提供更好的类型推断和开发体验。
全局 API（如Vue.nextTick）改为按需导入。
移除了过滤器（filters），推荐使用计算属性或方法替代。
支持多个v-model绑定
移除$on、$off等事件总线方法，推荐使用mitt等第三方库。

2、生命周期

创建：beforeCreate、created
挂载：beforerMounted、mounted
更新：beforeUpdate、updated
销毁：beforeUnmount、unmounted
组合式API：前缀加on；beforeCreate和created的功能可以直接在setup中实现，无需显式调用；调试钩子onRenderTracked和onRenderTriggered仅在开发模式下有效。

3、computed、watch

computed：计算属性，有缓存，依赖变化才更新
watch：监听，适合异步/复杂逻辑

4、组件通信

父子：props、emit
兄弟：eventBus、状态管理
跨层：provide/inject、pinia、vuex
跨页：路由
（可参考：【前端】项目中遇到的问题汇总（长期更新）（一、7））

5、v-if、v-show

v-if：真实的销毁、创建
v-show：相当于display:none；（常用：频繁切换

6、vue性能优化方案

v-show替代频繁的v-if
组件懒加载
防抖节流
虚拟列表
图片懒加载
局部加载

三、CSS类

1、水平垂直居中

flex布局(justify-content/alig-items)、定位、grid、margin
（可参考：【前端】项目中遇到的问题汇总（长期更新）（四、6））

2、flex布局

flex-direction:排列方式(row/row-reverse/column…)
flex-wrap:换行方式(nowrap/wrap/wrap-reverse)
flex-flow:排列+换行
justify-content:水平对齐
align-items: 垂直对齐
align-content:常用space-between两端间距相等、space-around两侧间距相等