web前端面试题(一直更新)

一、Vue

1、v-show和v-if不同

（1）实现方式

v-if是一种条件渲染指令，它会根据表达式的值来插入或删除元素。当表达式的值为真时，元素会被插入到DOM中，否则会从DOM中删除。

v-show是一种简单的显示/隐藏指令，它会根据表达式的值来显示或隐藏元素。当表达式的值为真时，元素会被显示，否则会被隐藏。

（2）性能

由于v-if的工作原理是从DOM中添加或删除元素，因此它对于频繁切换的元素具有较高的开销。每次切换时，v-if都需要重新渲染元素及其所有子元素。

v-show则不会从DOM中删除元素，而是使用CSS的display属性来控制元素的显示或隐藏。因此，v-show对于频繁切换的元素具有更好的性能，因为元素的渲染不需要重复进行。

（3）适用场景

v-if适用于只有在满足特定条件时才需要渲染的元素，因为它可以节省不必要的DOM元素和子元素的渲染开销。

v-show适用于需要在不同的状态之间切换的元素，因为它可以避免在切换时重新渲染元素及其所有子元素。

 2、vue-router路由模式有几种

1：Hash 模式（默认）：

在 URL 中使用带有 # 符号的哈希值来管理路由。例如：http://xxxx.com/#/path。 在 Hash 模式下，当 URL 的哈希值发生变化时，浏览器不会向服务器发送请求，而是通过监听 hashchange 事件来进行路由导航。

2：History 模式：

使用 HTML5 的 History API 来管理路由。这种模式下，URL 不再需要使用哈希值，而是直接使用正常的 URL 地址。例如：http://xxxx.com/path。 在 History 模式下，当 URL 发生变化时，浏览器会向服务器发送请求，服务器需要配置相应的路由规则，以确保在刷新页面或直接访问 URL 时能正确响应路由。

3：Abstract 模式：

这种模式主要用于非浏览器环境，比如在服务器端渲染（Server-Side Rendering）时使用。 在 Abstract 模式下，Vue Router 不会对 URL 进行任何处理，而是将路由信息保存在内存中，通过编程方式进行路由导航。

可以通过创建 Vue Router 实例时的 mode 配置项来选择使用哪种路由模式。例如：

 

二、CSS

1、Css隐藏元素的方法

1、display:none

2、opacity属性透明度为0

3、Visibility:hidden

visibility:hidden 隐藏元素，位置还存在与页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘

opacity:0 将元素设置为透明，位置还存在页面文档流中，不会被删除，所以会触发浏览器渲染引擎的重绘

display:none 隐藏元素，且其位置也不会被保留下来，所以会触发浏览器渲染引擎的回流和重绘。

visibility:hidden和display:none的显著区别

display:none和visibility:hidden，都能够将元素隐藏。但是visibility:hidden隐藏的元素在页面中仍占据着位置，也就是说该元素后面的元素会给这个设置visibility:hidden的元素空出位置。而display:none隐藏的元素不会再占据着页面的位置。

 2、简述Css盒子模型

页面就是由一个个盒模型堆砌起来的，每一个html元素都可以叫做盒模型。CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒模型（Box Modle）可以用来对元素进行布局，由内到外包含实际内容、内边距、边框、和外边距四个部分。

 一个盒子中主要的属性就5个：width、height、padding、border、margin

 W3C盒子模型（标准盒模型）：width和height指的是内容区域的宽度和高度

即：在标准模式下，元素总宽度 = 内容的width + padding(左右) + border(左右) + margin(左右)

IE盒子模型（怪异盒模型）：width和height指的是内容区域、边框、内边距总的宽度和高度

即：在怪异模式下，元素总宽度 = 内容的width + margin(左右)（这里的width包含了padding(左右)和border(左右)的值）

三、JavaScript

1、JavaScript的数据类型

基本数据类型（值类型）：Number、String、Boolean、Undefined、Null、Symbol（es6新增的一种独一无二的值）和BigInt（es10新增），这些类型可以直接操作保存在变量中的实际值。

引用数据类型：Object。包含Object、Array、function、Date、RegExp。（在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象）

 2、字符串转换成数组

通过split分割，将字符串分割成数组

var a= "1,2,3,4";
var b = a.split(",");
 b=[1,2,3,4]

3、数组转换成字符串

有三种方式，toString、toLocaleString、join

toString()    将数组转换成一个字符串
toLocaleString()    把数组转换成本地约定的字符串
join()    将数组元素连接起来以构建一个字符串

(1)join

join()    可理解为直接变成字符串，默认逗号分隔
join(“a”)   括号中的数据可以为、。! -等，将数据中的“,”替换

join()
var a=["1","2","3"]
var b=a.join()
b="1,2,3"

join("-")
var a=["1","2","3"]
var b=a.join("-")
b="1-2-3"

(2)toString

toString不需要指定分隔符
var a=["1","2","3"]
var b=a.toString();
b="1,2,3"
如果需要设置分隔符的化使用replace方法

(3)toLocaleString

join("-")
var a=["1","2","3"]
var b=a.toLocaleString();
b="1-2-3"

 4、将两个数组合并到一起

（1）concat

var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.concat(arr2)

（2）push

var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.push(...arr2)

（3）unshift

var arr=[1,2,3]
var arr2=[4,5,6]
arr=arr.unshift(...arr2)

push和unshift结合...[]使用

 

其他

1、Var与let、const的区别？

1、var在ECMAscript所有版本可以使用，let和const在ECMAscript6和更晚的版本使用

2、Var和let声明的变量都是可以改变的，不仅可以改变在也可以改变类型。Const声明叫常量，一经定义就不可改变

3、var与let的区别在与作用域。var的声明范围是函数作用域，在全局范围内声明，。Let只在块级作用域中

4、const声明对象需要初始化其他两个不需要

5、Let不允许重复声明

2、和=区别

1、==：先转换为同一数据类型再进行比较

2、===：先比较数据类型，数据类型不一致直接返回false

var定义的变量，没有块的概念，可以跨块访问, 不能跨函数访问。
let定义的变量，只能在块作用域里访问，不能跨块访问，也不能跨函数访问。
const用来定义常量，使用时必须初始化(即必须赋值)，只能在块作用域里访问，而且不能修改。

 3、em、rem、px、rpx的区别

单位名称	说明	web	小程序
px	绝对单位，代表像素量	支持	支持
em	相对单位，相对于父元素的字体大小	支持	支持
rem	相对单位，相对于页面跟标签html的字体大小	支持	不支持
rpx	相对单位，小程序独有，750px等于视口宽度，可以根据屏幕自适应缩放	不支持	支持