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盒子模型
一个盒子中主要的属性就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等于视口宽度，可以根据屏幕自适应缩放 |
不支持 | 支持 |
