前端面试一定要掌握的十道面试题(带答案)

本文列举了前端面试中常见的十道题目，涵盖了CSS隐藏元素方式、盒模型的区别、src与href的差异、JavaScript数据类型及转换、原生AJAX实现、Vue生命周期、v-for与:key的作用等方面，旨在帮助开发者准备面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、页面元素的隐藏方式和各自特点？

display:none; 设置为display:none;的元素将不会再占用页面空间，其占用的空间会被其他元素所占有，从而会引起浏览器的重排和重汇。

visibility: hidden 这种做法虽然能够隐藏元素，但是该元素仍会占用页面空间，因此只会导致浏览器的重汇而不会引起重排。

opacity:0 设置元素透明度opacity属性为0，也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

将width heihgt 设置为0 或者使用z-index将数值设置为最小,可以隐藏在其他元素下面

2、用过哪些盒模型，以及他们各自的区别？

IE盒子模型box-sizing:border-box;（怪异模式）

W3C标准盒子模型 box-sizing:content-box;（标准模式）默认模式

content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容，但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小，不包括border和margin
border-box:width和height属性包括padding和border，但不是margin。这是盒模型的文档时，Internet Explorer使用Quirks模式。
content-box不包含padding，border-box包含padding。所以如果你设置的大小是一样的，content-box看起来，会比border-box大

3、src和href的区别？

1、请求资源类型不同
（1） href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）在请求 src 资源时会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于在当前文档和引用资源之间确立联系；

（2）src 用于替换当前内容；

3、浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

既然我们上面提到了link和@import导入css文件是不同的，那我们就顺便说说两者的区别，如果您已经知道，就可以不用往下看了哈

link和@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

4、js 数据类型有几种？它们之间的区别是什么？

JS中有两种数据类型:

1.简单数据类型（也称基本数据类型）: Undefined;Null;Boolean;Number和String。

2.引用数据类型（也称复杂数据类型），其中包括Object；Array；Function等等。

基本数据:

1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
2.基本数据类型不可以添加属性和方法
3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值，会在变量对象上创建一个新值，然后把该值复制到为新变量分配的位置上
4.基本数据类型的比较是值的比较

引用数据类型:

1.引用数据类型的特点和基本数据类型相反。
2.引用类型可以添加属性和方法
3.引用类型的赋值是对象引用
4.引用类型的比较是引用的比较

5、数据类型强制转化和隐式转化的分别怎么使用？

数值:

Number(参数) 把任何的类型转换为数值类型
parseInt(参数1，参数2) 将字符串转换为整数
parseFloat() 将字符串转换为浮点数

字符串:

String(参数),可以将任何的类型转换为字符串
toString(),调用的格式对象.toString(), 作用是将对象以字符串的方式来表示

布尔类型:

Boolean() 可以将任何类型的值转换为布尔值

函数:

isNaN( ) 该函数会对参数进行隐式的Number()转换，如果转换不成功则返回true;
alert() 输出的内容隐式的转换为字符串

隐式转换:

在js中，当运算符在运算时，如果两边数据不统一，CPU就无法计算，这时我们编译器会自动将运算符两边数据做一个数据类型转换，转成一样的数据类型再计算这种无需程序员手动转换，而由编译器自动转换的方式就称为隐式转换

6、说明原生ajax的实现步骤？

//1.创建ajax对象
try{
	//IE8以下不兼容
	var ajax = new XMLHttpRequest();  
}catch(e){
	//IE8以下的声明方法
	var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
}


//2.初始化
ajax.open('get','./ajax_get.php?a=b&c=d',true);
//参1 请求方式 get post
//参2 url
//参3 是否异步   true 异步  false同步

//3.发送请求
ajax.send();		

//4.绑定状态改变事件,等待数据响应
ajax.onreadystatechange =function(){
	//代表服务器成功相应数据了
	if(ajax.readyState==4  && ajax.status ==200){
		var mes = ajax.responseText;//获取服务器的相应数据
			console.log(eval(ajax.response))//把json字符串数据转换成json对象
	}	
}

7、vue 有几个生命周期以及各个生命周期的调用时机？

beforeCreate : 创建Vue实例前的时候执行，
created : 创建Vue实例完成后执行，
beforeMount : Vue实例开始渲染前执行，
mounted : Vue实例渲染完成后执行，
beforeUpdate : Vue实例修改前执行，
updated : Vue实例修改完成后执行，
beforeDestroy : Vue开始消亡前执行，
destroyed : Vue实例消亡后执行，
activated ：组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated ：组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。