Web前端面试题 (附答案及解析)（2025.7月最新版） - 破风 ... - 面试

本文基于2025年7月最新版的Web前端面试题资料，系统梳理HTML、CSS、java script、Vue2、Vue3、React、UniApp及Webpack等核心技术的高频考点，结合实际面试经验和深入解析，帮助在校大学生和初级开发者全面掌握前端面试的核心知识点。

一、HTML篇

1. HTML5 新增那些标签?

HTML5引入了许多新的标签，极大增强了网页的语义化与功能扩展。主要新增的标签包括：

语义化标签：<header>、<nav>、<article>、<section>、<aside>、<footer>。这些标签用于定义页面结构，使HTML代码更具可读性和可维护性。
多媒体标签：<video> 和 <audio>。它们提供了一套标准的方式来嵌入音视频内容，并支持如自动播放、控制、循环、静音等属性。
图像相关标签：<img> 标签新增了 srcset 和 sizes 属性，用于响应式图片的加载优化。
API标签：如 <canvas> 用于绘图，<webworker> 用于实现多线程操作。

语义化标签的优势包括提高可访问性、增强SEO效果、方便团队协作开发等。现代前端项目中，HTML5是主流标准，建议开发者深入掌握其特性。

2. 块元素、行内元素、行内块元素，三者有何不同以及区别?

三种元素类型的差异主要体现在布局和样式控制上：

块元素：占据整行，可以设置宽高和内外边距，常见如 <div>、<p>、<h1> 等。
行内元素：不独占一行，尺寸由内容决定，只能设置左右边距，不能设置上下边距，如 <span>、<a>、<em>。
行内块元素：兼具块元素和行内元素的特性，可设置宽高，但不独占一行，如 <img>、<input>、<button>。

理解这些元素的区别对于布局设计至关重要，尤其是在使用Flex布局或Grid布局时，合理选择元素类型能有效提升代码效率和页面表现。

3. HTML4、HTML5、XML、XHTML它们之间有什么区别?

HTML4和HTML5是两种不同的HTML标准，而XML和XHTML则是数据格式与标记语言。它们的区别如下：

HTML4：主要用于传统的网页开发，兼容性要求高，但功能有限。现在已经逐步被淘汰。
HTML5：现代网页开发的标准，支持更多功能和语义化标签，适合构建复杂的Web应用。
XML：一种标准化的标记语言，常用于数据存储和传输，如配置文件、企业数据交换等。虽然仍有一定应用场景，但逐渐被JSON取代。
XHTML：基于XML的HTML，要求严格语法（如标签闭合、大小写一致），在早期移动设备和对规范要求高的项目中使用较多，现在几乎不再使用。

掌握这些标准的区别，有助于在不同项目中选择合适的开发框架和工具。

4. DOCTYPE(文档类型) 的作用

DOCTYPE用于声明HTML文档的版本，其核心作用是：

告知浏览器解析规则：确保浏览器按照指定的HTML标准（如HTML5、HTML4.01、XHTML）解析页面。
触发标准模式：避免浏览器进入“怪异模式”，从而保证页面布局的稳定性。

在HTML5中，<!DOCTYPE html> 是最简声明，能有效触发标准模式，且无需引用DTD文件。现代开发中，DOCTYPE是必不可少的，建议开发者在代码中始终包含。

5. localStorage、sessionStorage、cookie 三者区别对比

这三种存储方式各有特点，适用于不同场景：

localStorage：持久化存储，数据在浏览器关闭后仍保留；存储容量一般为5MB；适用于缓存用户数据。
sessionStorage：会话存储，数据在浏览器关闭后会被清除；存储容量同样为5MB；适用于临时数据缓存。
cookie：客户端存储，数据可设置过期时间，且可以通过服务器端进行管理；存储容量较小，一般为4KB；常用于用户身份识别和会话管理。

在前端开发中，根据需求合理选择存储方式，是提高用户体验和页面性能的关键。

二、CSS篇

1. link 与 @import 的区别和用法

<link>：是HTML标签，用于引入CSS文件，支持浏览器缓存，兼容性更好，且在SEO优化中更有优势。
@import：是CSS中的语法，用于在样式表中引入其他CSS文件，不支持缓存，且兼容性较差，尤其在旧版浏览器中表现不稳定。

建议在实际项目中使用 <link> 标签引入CSS，以确保兼容性和性能。

2. rgba和opacity的透明效果有什么不同?

rgba：用于设置颜色的透明度，支持单独设置颜色通道，如 rgba(255, 0, 0, 0.5) 表示红色半透明。
opacity：用于设置元素整体的透明度，会影响元素及其子元素的所有样式属性，如背景、边框等。

在实际开发中，若需要精确控制元素的透明度，使用 rgba 更为灵活和高效。

3. display:none与visibility:hidden的区别?

display: none：隐藏元素，不占据页面空间，元素在DOM树中仍存在，但不可见。
visibility: hidden：隐藏元素，但占据页面空间，元素在DOM树中仍然存在，不可见，但不影响布局。

两者的主要区别在于是否影响页面布局，开发者需根据具体需求选择。

4. 定位布局 position中的relative、absolute、fixed、sticky它们之间的区别?

position: relative：相对于当前元素的原始位置进行偏移，不脱离文档流。
position: absolute：相对于最近的定位祖先元素（即 position 不为 static 的元素）进行偏移，脱离文档流。
position: fixed：相对于浏览器窗口进行定位，脱离文档流，常用于固定导航栏或悬浮按钮。
position: sticky：结合 top、bottom 等属性，实现滚动时的粘性定位，不脱离文档流。

理解这几种定位方式的区别，是实现复杂布局和交互设计的基础。

5. 如何用CSS3画一条0.5px的直线?

在移动端设备上，由于屏幕像素密度较高，0.5px的线条可能无法正常显示。可以通过以下方式实现：

.border {
  border: 1px solid #000;
  transform: scale(0.5);
  transform-origin: 0 0;
}

此方法通过缩放实现0.5px的线条宽度，但需要注意缩放会影响其他样式，建议谨慎使用。

6. 如何用CSS3画一个三角形?

CSS3可以通过伪元素和border属性实现三角形的绘制：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid red;
}

通过设置不同方向的border，可以创建出不同方向的三角形，是前端设计中常用的技巧。

7. CSS3盒子模型：标准盒模型、怪异盒模型

标准盒模型（box-sizing: border-box）：内容区域不包括边框和内边距，width 和 height 包含边框和内边距。
怪异盒模型（box-sizing: content-box）：内容区域包括边框和内边距，width 和 height 不包含这些。

在CSS3中，推荐使用标准盒模型，以避免布局计算错误。掌握盒模型的使用，是实现精确布局的关键。

8. 浮动（float）以及清除浮动的方法

浮动：使元素向左或向右移动，常用于布局页面中的内容块。
清除浮动：使用 clear: both、overflow: hidden、:after 伪元素等方法，可以有效避免浮动带来的布局塌陷问题。

在使用浮动布局时，务必注意清除浮动，以保证布局的稳定性和可维护性。

9. Flex布局

Flex布局是一种灵活的布局方式，适用于响应式设计和移动端开发。其核心特性包括：

主轴与交叉轴：主轴用于排列元素，交叉轴用于对齐元素。
flex-direction：控制主轴方向，如 row、column。
justify-content：控制主轴上的对齐方式。
align-items：控制交叉轴上的对齐方式。

Flex布局是现代前端开发中不可或缺的技能，建议深入理解其原理和使用场景。

10. CSS3中 transform 属性（平面转换）

transform 属性用于对元素进行旋转、缩放、平移、倾斜等操作，常见的属性包括：

translate(x, y)：平移元素。
rotate(angle)：旋转元素。
scale(x, y)：缩放元素。
skew(x, y)：倾斜元素。

掌握 transform 的使用，可以实现更复杂的动画和交互效果。

11. CSS3中 “子绝父相” 定位布局

“子绝父相”是一种定位布局技巧，即：

子元素设置为 position: absolute。
父元素设置为 position: relative。

这样可以实现相对定位，使子元素在父元素范围内自由移动，是实现复杂布局的重要方法。

12. 盒子居中的几种方法：“子绝父相”、“Flex布局”、“transform”

“子绝父相”：通过 position: absolute 和 transform: translate(-50%, -50%) 实现居中。
Flex布局：通过 display: flex、justify-content: center、align-items: center 实现居中。
transform：通过 margin: auto 和 transform: translate(-50%, -50%) 实现居中。

这三种方法各有优劣，开发者需根据具体场景选择最适合的方案。

13. CSS3中有哪些新特性?

CSS3引入了许多新特性，如：

选择器增强：如 nth-child、attribute selectors。
动画和过渡：@keyframes 和 transition。
阴影和渐变：box-shadow 和 background-image。
Flexbox和Grid布局：用于构建响应式页面结构。

掌握这些新特性，可以显著提升前端开发的效率和页面美观度。

14. CSS3选择器及其优先级

CSS3中的选择器优先级从高到低依次为：

内联样式（style 属性）。
ID选择器（#id）。
类选择器（.class）。
标签选择器（tag）。
通配符选择器（*）。
伪类、伪元素（如 :hover、::before）。

理解选择器的优先级，有助于解决CSS样式冲突问题。

15. CSS3中 “transition” 过渡属性

transition 属性用于定义元素在样式变化时的动画效果，常见用法为：

transition: all 0.3s ease-in-out;

该属性可以控制过渡时间、缓动函数和过渡属性，是实现平滑动画的重要工具。

16. 结构伪类选择器&伪元素选择器

结构伪类选择器：如 :first-child、:nth-child(n)、:last-child。
伪元素选择器：如 ::before、::after、::first-line、::first-letter。

掌握这些选择器，可以更高效地操作DOM元素，提升开发效率。

17. display的block、inline和inline-block的区别?

block：独占一行，可以设置宽高和内外边距。
inline：不独占一行，宽度由内容决定，无法设置宽高。
inline-block：兼具block和inline的特性，可以设置宽高，但不独占一行。

理解这些display值的区别，是实现布局的基础。

18. 定位堆叠顺序z-index

z-index 用于控制元素的堆叠顺序，其值为整数，数值越高，元素越靠上。需要注意：

z-index仅对定位元素（即 position 为 relative、absolute、fixed 等）有效。
z-index的值为负数时，元素会覆盖在其他元素之下。

掌握 z-index 的使用，是实现复杂页面交互的关键。

三、HTML&&CSS混合篇

1. LocalStorage、sessionStorage、cookie 的区别（⭐⭐⭐）

这三种存储方式在功能和适用场景上有明显区别：

localStorage：持久化存储，适合缓存用户数据。
sessionStorage：会话存储，适合临时数据管理。
cookie：客户端存储，适合用户身份识别和会话管理。

在实际开发中，选择合适的存储方式可以显著提升用户体验和系统性能。

2. 如何实现双飞翼（圣杯）布局?

双飞翼布局是一种经典的布局模式，常用于实现左右两边固定，中间内容可伸缩的结构。其核心实现方式包括：

父容器设置为 position: relative。
左、右容器设置为 position: absolute，并使用 left: 0 和 right: 0 定位。
中间容器设置为 position: relative，并使用 margin-left 和 margin-right 填充左右容器之间的空间。

掌握这种布局方式，是前端开发中不可或缺的技能。

3. 伪元素和伪类的区别和作用?

伪元素：如 ::before、::after，用于插入元素的内容或样式。
伪类：如 :hover、:first-child，用于选择特定状态或结构的元素。

两者在功能和使用场景上有明显区别，开发者需根据需求选择合适的工具。

4. img 的 alt 与 title 的异同，还有实现图片懒加载的原理?

alt：图片的替代文本，用于无障碍访问和加载失败时显示。
title：图片的提示文本，当鼠标悬停时显示，可选属性。

图片懒加载的实现原理是：延迟加载非视口内的图片，提升页面加载速度。常见的实现方式包括：

Intersection Observer API：检测元素是否进入视口，加载图片。
java script动态加载：根据滚动事件判断图片位置，动态加载。

掌握这些技术，有助于提升前端性能和用户体验。

5. BFC 是什么?

BFC（Block Formatting Context）是浏览器的一种布局机制，用于解决元素的浮动、溢出、边距合并等问题。BFC的触发方式包括：

设置 overflow: hidden。
使用 float。
使用 position: absolute。
使用 display: inline-block。

理解BFC的原理和触发方式，有助于实现复杂的布局和解决常见的样式问题。

四、java script篇

1. JS基础类型和复杂类型

java script的基础类型包括：undefined、null、boolean、number、string、symbol。复杂类型包括：object、array、function。

掌握这些类型的区别和特性，是理解java script底层机制的基础。

2. 箭头函数与普通函数的区别?

箭头函数：使用 => 定义，没有自己的 this、arguments、super、new.target。
普通函数：有 this、arguments、super、new.target，可以作为构造函数使用。

箭头函数在开发中更加简洁，尤其适合处理回调函数和事件监听。

3. JS中null和undefined的判断方法和区别?

null：表示“空值”，通常用于表示变量未赋值。
undefined：表示“未定义”，通常用于未初始化的变量或未返回值的函数。

在实际开发中，typeof 可以用来判断类型，而 === null 则用于判断 null 值。

4. 原型链

原型链是java script中实现继承和共享属性的核心机制。每个对象都有一个原型对象，通过 [[Prototype]] 连接。理解原型链有助于掌握对象的继承和属性查找机制。

5. v-show 与 v-if 的区别?

v-show：通过CSS的 display 属性控制元素显示，不会从DOM中移除，适合频繁切换的场景。
v-if：通过条件判断控制元素是否存在，会从DOM中移除，适合不频繁切换的场景。

在使用时需根据具体需求选择。

6. keep-alive 的作用是什么?

<keep-alive> 是Vue中用于缓存组件状态的标签，可以避免组件重复渲染。适用于动态组件和频繁切换的组件。

7. 闭包的理解?

闭包是java script中函数和作用域的结合体，允许函数访问其外部作用域的变量。闭包常用于数据封装和函数工厂等场景。

8. JS垃圾回收机制

JS采用引用计数和标记清除两种方式进行垃圾回收。理解垃圾回收机制有助于优化内存使用，避免内存泄漏。

9. nextTick的实现?

nextTick 是Vue中用于在DOM更新后执行回调的方法，常用于异步操作和数据更新后的处理。

10. 混入mixin的原理?

混入（mixin）是一种代码复用机制，允许将多个组件的公共功能提取为一个对象，然后通过 mixins 选项将该对象注入到组件中。

11. js列举和数组操作相关的方法(常用)

java script中常用的数组方法包括：

push()、pop()、shift()、unshift()、slice()、splice()、sort()、map()、filter()、reduce()。

掌握这些方法，可以显著提升代码效率和可读性。

12. typeof和instanceof的区别是什么?

typeof：用于判断数据类型，如 typeof 123 返回 "number"。
instanceof：用于判断对象类型，如 obj instanceof Array 返回 true。

两者在使用上有明显区别，开发者需根据具体需求选择。

13. JS中 “==” 和 “===” 的区别详解

==：类型转换后比较，如 1 == '1' 返回 true。
===：严格比较，不进行类型转换，如 1 === '1' 返回 false。

推荐使用 ===，以避免类型转换带来的潜在错误。

14. 如何用原生 JS给一个按钮绑定两个 onclick 事件?

可以通过事件委托或直接绑定两个函数实现：

button.onclick = function1;
button.onclick = function2;

注意，后绑定的函数会覆盖前一个函数，因此建议使用 addEventListener 来绑定多个事件。

15. var、let和const的区别?

var：函数作用域，可以重复声明，作用域不安全。
let：块作用域，不能重复声明，作用域更安全。
const：块作用域，不能重复声明，常用于声明常量。

在现代开发中，推荐使用 let 和 const，以提高代码的可读性和安全性。

16. 讲解js的call、apply和bind区别?

call：立即调用函数，并传递参数。
apply：与 call 相似，但参数以数组形式传递。
bind：创建一个绑定特定this值的新函数，不立即调用。

这些方法在实现函数重用和上下文绑定时非常有用。

17. 谈谈你对webpack的理解?

Webpack 是一个模块打包工具，可以将项目中的java script、CSS、图片等资源打包成一个或多个文件。其核心特性包括：

模块依赖分析：自动解析和打包模块之间的依赖关系。
代码分割：支持代码分割和懒加载，提升页面加载速度。
插件系统：丰富的插件生态系统，支持代码压缩、热更新等功能。

掌握Webpack的使用，是提升前端开发效率的关键。

18. const定义的对象属性是否可以改变?

虽然 const 定义的变量不能重新赋值，但对象的属性可以修改。例如：

const obj = { name: 'John' };
obj.name = 'Jane'; // 允许修改

掌握这一点，有助于避免不必要的错误。

19. 栈溢出及解决方法?

栈溢出通常由递归调用或深度嵌套函数调用引起。解决方法包括：

避免无限递归。
使用尾递归优化。
合理控制递归深度。
使用异步处理，如 Promise 或 async/await。

理解栈溢出的原理和解决方法，是提升代码质量的重要技能。

20. JS如何实现多线程?

java script 是单线程语言，但可以通过 Web Worker 实现多线程：

Web Worker：在后台运行脚本，不阻塞主线程。
MessageChannel：用于在主线程和Worker之间传递数据。

掌握这些方法，有助于提升复杂计算任务的性能。

21. 浅拷贝和深拷贝区别概念常见情况?

浅拷贝：复制对象的引用，不复制嵌套对象。
深拷贝：递归复制对象的所有属性，包括嵌套对象。

常见场景如：复制对象结构、避免数据污染、性能优化等。

22. 事件循环，Promise和async/await的详解

事件循环：java script的非阻塞机制，通过异步处理提升性能。
Promise：用于处理异步操作，支持 then、catch 等方法。
async/await：简化异步代码，使其更接近同步写法，提高代码可读性。

掌握事件循环和异步处理，是理解java script底层机制的基础。

23. JS中数组常用方法详解

java script中的数组方法包括：

push()、pop()、shift()、unshift()、slice()、splice()、sort()、map()、filter()、reduce()。

掌握这些方法，可以显著提升代码的效率和可读性。

五、Vue2篇

1. 什么是前端构建工具?比如（Vue2的webpack，Vue3的Vite）

前端构建工具用于自动化构建项目，提高开发效率。Vue2常用的构建工具是 Webpack，而Vue3推荐使用 Vite。

Webpack：功能强大，支持模块打包、代码压缩、热更新等功能。
Vite：基于ES模块，构建速度快，适合现代前端开发。

掌握构建工具的使用，有助于提升开发效率和项目质量。

2. Vue 组件之间的通信方式

Vue组件之间的通信方式包括：

props / events：父子组件通信。
Vuex：全局状态管理。
Event Bus：利用 new Vue() 创建一个事件中心，用于跨组件通信。
provide / inject：祖孙组件通信。

理解这些通信方式，是构建复杂Vue应用的基础。

3. Vuex的理解及使用场景

Vuex是Vue的全局状态管理工具，适用于需要共享状态的大型项目。其核心特性包括：

单一状态树。
模块化。
可预测性。

掌握Vuex的使用，有助于构建可维护的大型Vue项目。

4. vue 的生命周期八个阶段

Vue组件的生命周期包括：

beforeCreate：创建组件实例，但未初始化数据和方法。
created：实例创建完成，数据和方法已初始化。
beforeMount：模板编译完成，但未挂载到DOM。
mounted：组件已挂载到DOM。
beforeUpdate：数据更新前，模板重新渲染。
updated：数据更新后，模板重新渲染。
beforeDestroy：组件销毁前，进行清理操作。
destroyed：组件销毁完成。

理解生命周期，有助于优化组件性能和处理副作用。

5. 简述Vue每个周期具体适合哪些场景?

beforeCreate：适合初始化前的配置。
created：适合数据初始化和数据请求。
beforeMount：适合模板编译后的操作。
mounted：适合DOM操作和初始化第三方库。
beforeUpdate：适合数据更新前的处理。
updated：适合数据更新后的处理。
beforeDestroy：适合清理资源和取消订阅。
destroyed：适合最后的资源释放。

掌握生命周期的应用场景，有助于优化Vue组件的性能和交互。

6. 简述MVVM 和MVC的原理以及区别?

MVC：模型（Model）、视图（View）、控制器（Controller）三部分构成，用于分离业务逻辑和界面。
MVVM：模型（Model）、视图（View）、视图模型（ViewModel），通过数据绑定实现视图与模型的双向同步。

MVVM相比MVC更数据驱动，适合现代前端框架（如Vue、React）。

7. vue常见指令

Vue中常见的指令包括：

v-if、v-show、v-for、v-on、v-bind、v-model、v-text、v-html、v-cloak、v-pre。

掌握这些指令，有助于高效开发Vue应用。

8. vue中的data为什么是一个函数？起到什么作用？

在Vue中，data 是一个函数，其作用是：

保证每个组件实例的数据独立。
避免多组件共享同一个对象，防止数据污染。

理解这一点，有助于构建可维护的Vue项目。

9. vue中ref的作用？

ref 用于直接获取DOM元素或组件实例。在Vue中，ref 可以帮助开发者操作DOM或访问组件方法，常用于表单验证和动态操作。

10. Vue中hash和history的区别？

hash：使用 # 标记路径，兼容性好，适用于旧浏览器。
history：使用HTML5的 pushState，更符合现代前端开发规范，适合SPA（单页应用）。

掌握这两者的区别，有助于选择合适的路由方式。

六、Vue3篇

1. Vue2.0和Vue3.0的区别?

响应式机制：Vue2使用 Object.defineProperty，而Vue3使用 Proxy。
性能改进：Vue3在性能上有了显著提升，支持更快的渲染和更小的体积。
API变化：Vue3对API进行了重构，提高了代码的可读性和可维护性。
TypeScript支持：Vue3对TS的支持更加完善。

掌握这些差异，有助于理解Vue3的优势和使用方式。

2. Vue3带来了什么改变?

Vue3引入了许多新特性，如：

Composition API：与选项式API并行的编程方式，使代码更模块化。
响应式系统优化：使用 Proxy 实现更高效的响应式机制。
TypeScript支持：内置TS支持，提升代码质量。
性能提升：响应式系统和虚拟DOM的优化，使性能更佳。

这些改变使Vue3更适合构建大型项目。

3. 生命周期（vue2和vue3的生命周期对比）

Vue2生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

Vue3生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。

Vue3将 beforeDestroy 和 destroyed 改为 beforeUnmount 和 unmounted，更符合现代开发习惯。

4. Vue3.0中的响应式原理是什么? Vue2的响应式原理是什么?

Vue2：使用 Object.defineProperty，对对象的属性进行拦截，实现响应式。
Vue3：使用 Proxy，对对象和数组进行深层响应式，性能更优。

掌握响应式原理，有助于深入理解Vue的底层机制。

5. Vue3的常用 Composition API有哪些?

Vue3的常用Composition API包括：

setup()：组件的入口函数，用于定义响应式数据和方法。
ref()：用于创建响应式的基本数据类型。
reactive()：用于创建响应式的对象。
computed()：用于创建计算属性。
watch()：用于监听响应式数据的变化。
onMounted()、onUpdated()、onUnmounted()：生命周期钩子函数。

掌握Composition API，有助于编写更模块化和可维护的代码。

6. Vue3中的ref函数

ref() 是Vue3中用于创建响应式基本数据类型的函数，适用于布尔、数字、字符串等。例如：

const count = ref(0);

使用 ref 可以使数据在模板中响应式更新，是Vue3开发中的核心工具。

七、React篇

1. 讲讲什么是 JSX?

JSX 是 java script XML 的缩写，是React中用于编写组件结构的语法。JSX 允许开发者以类似HTML的方式编写React组件，提高代码可读性。

2. React 的生命周期方法有哪些?

React的生命周期方法包括：

Mounting：constructor()、render()、componentDidMount()。
Updating：componentDidUpdate()。
Unmounting：componentWillUnmount()。

掌握这些方法，有助于优化组件性能和处理副作用。

3. React的Hooks详解

React Hooks 是一种函数组件的增强功能，包括：

useState()：用于管理组件状态。
useEffect()：用于执行副作用操作。
useRef()：用于访问 DOM 元素或保持状态。
useContext()：用于共享组件之间的状态。

掌握Hooks，是现代React开发的重要技能。

4. React和Vue.js的相似性和差异性是什么?

相似性：两者都支持组件化开发、单向数据流、状态管理。
差异性：React 使用 JSX 和 Hooks，Vue 使用 模板语法 和 选项式API。

掌握这些差异，有助于在不同框架之间进行切换和选择。

5. React的功能是什么?

React 是一个用于构建用户界面的java script库，主要功能包括：

组件化开发：将页面拆分为可复用的组件。
虚拟DOM：提高渲染性能。
单向数据流：数据从父组件流向子组件。

掌握React的核心功能，有助于快速上手和开发。

6. React的一些主要优点是?

组件化：提高代码复用性和可维护性。
虚拟DOM：提升渲染性能。
单向数据流：简化数据管理。
生态丰富：支持丰富插件和工具，适合大型项目。

掌握这些优点，有助于选择React作为前端框架。

7. React的局限性是什么?

学习曲线陡峭：需要掌握JSX、Hooks、React生态等。
框架依赖：需要配合其他工具使用，如Redux、React Router。
性能问题：虽然优化了虚拟DOM，但复杂组件仍可能存在性能瓶颈。

理解React的局限性，有助于合理选择技术栈。

8. 如何理解React State不可变性的原则?

React 的 state 是不可变的，即 不能直接修改。修改 state 应通过 setState() 方法。这一原则有助于状态管理和性能优化。

9. React的特点和关键版本区别?

特点：组件化、虚拟DOM、生态丰富。
关键版本：React 16引入了 React Fiber，React 18引入了 并发模式（Concurrent Mode），提升性能和用户体验。

掌握这些特点和版本区别，有助于了解React的发展趋势。

10. React Fiber的深入理解

React Fiber 是 React 16 引入的新渲染引擎，主要特点包括：

优先级调度：根据任务的优先级动态调整渲染顺序。
内存优化：提升性能，避免阻塞主线程。
兼容性改进：支持更复杂的组件结构和状态管理。

理解React Fiber的原理，有助于提升开发效率和用户体验。

八、uniapp篇

1. uniapp优缺点

优点：支持多端开发，代码复用率高，适合小程序、H5、App等平台。
缺点：对某些平台的适配需要额外处理，功能不如原生开发强大。

掌握uniapp的优缺点，有助于选择合适的开发框架。

2. uniapp目录结构

uniapp的目录结构包括：

pages：存放页面。
components：存放自定义组件。
utils：存放工具函数。
App.vue：全局配置文件。
manifest.json：项目配置文件。

理解目录结构，有助于提高开发效率。

3. 跨端适配—条件编译

条件编译用于根据目标平台选择性编译代码，例如：

<template>
  <view v-if="isH5">这是H5页面</view>
  <view v-if="isApp">这是App页面</view>
</template>

<script>
export default {
  data() {
    return {
      isH5: false,
      isApp: false
    };
  },
  onReady() {
    this.isH5 = uni.getSystemInfoSync().platform === 'h5';
    this.isApp = uni.getSystemInfoSync().platform === 'app';
  }
};
</script>

掌握条件编译，有助于实现跨端适配。

4. uniapp 常用的指令语句

uniapp中常用的指令语句包括：

v-if、v-show、v-for、v-on、v-bind、v-model。

掌握这些指令，有助于高效开发uniapp应用。

5. uniapp 应用的生命周期、页面的生命周期、组件的生命周期

应用生命周期：onLaunch、onShow、onHide。
页面生命周期：onLoad、onShow、onReady、onHide、onUnload。
**组件生命周期

Web前端面试题 (附答案及解析)（2025.7月最新版） - 破风 ...