js基础

基本数据类型

string 字符串
number 数字
boolean 布尔
null 空
undefined 未定义
symbol 符号
bigint 大整数

引用数据类型

Object 对象
Array 数组
Function 函数
Map 映射
Set 集合

var、let、const的区别

var声明的变量会被提升到当前作用域顶部，并且可以多次重复声明；
let和const声明的变量具有块级作用域，仅在声明的代码块内可用，两者都不允许重复声明。
let可以先声明再赋值，声明的变量可以重复赋值，const一旦声明必须赋值，且不允许改变。
let和const的暂时性死区：一进入当前作用域，要使用的变量就已存在，但是不可获取；只有等到执行到该变量的声明代码时，才可获取和使用该变量。

js实现设拷贝

function deepClone(obj, hash = new WeakMap()) {
    if (obj === null || typeof obj !== 'object') return obj;    // 如果是基础数据类型或者null，直接返回

    if (obj instanceof Date) return new Date(obj);  // 如果是日期类型，返回新的日期对象

    if (obj instanceof RegExp) return new RegExp(obj);  // 如果是正则表达式，返回新的正则表达式对象

    if(hash.has(obj)) return hash.get(obj); // 如果hash中已经存在obj，直接返回，防止循环引用导致内存泄漏

    let newObj = new obj.constructor();
    hash.set(obj, newObj);

    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            newObj[key] = deepClone(obj[key], hash);
        }
    }

    return newObj;
}

重绘和回流

重绘：DOM元素中不影响其页面布局的属性发生改变后，被浏览器按照新的属性值重新绘制了一遍。重绘的属性一般有颜色值，透明度，字体大小等。
回流：DOM元素根据浏览器默认样式或者开发人定义的样式计算出结果，并放置到指定的位置。
重绘不一定发生回流，回流必定产生重绘。

js内存泄露都有哪些情况

js内存泄漏指程序中动态分配的内存由于某种原因未释放或无法释放，造成系统内存的浪费，最终导致程序运行缓慢或者崩溃。常见的有以下几种：
循环引用：两个或者以上的对象之间相互引用。
定时器未清除
DOM元素未正确删除：也就是DOM元素从DOM树上移除后，仍然被其他变量引用。
事件未正确解绑：DOM被删除时没有解除事件监听器，导致事件监听器无法被回收。
全局变量未清除：挂在window下的全局变量在不需要的时候，没有及时清理；可以通过删除或赋值null进行清除。
闭包未正确使用：未在不需要时删除闭包的引用。
大量数据未及时清理：js执行的时候创建的大量内存数据未被清理，容易导致内存泄漏。

对闭包的理解

解释：函数嵌套了一个内部函数，最终将这个内部函数返回出去；当外部函数执行完毕，内部函数仍然引用着外部函数的变量。这种引用了其他函数作用域变量的函数和这些被引用的变量的集合，称为闭包。闭包不是具体指某个函数，更多的是一种结合了代码运行机制的手法。
实现闭包：
1.通过函数嵌套和变量引用。
2.自调用函数（容易造成全局变量污染）
作用：延长外部函数中变量的生命周期。
闭包的应用：定义js模块，向外提供具体方法的同时，保护内部变量不受修改。
缺点：容易造成内存泄漏。
解决方法：在闭包使用完之后及时清理。

对js原型链的理解

原型对象：就是一个对象，为创建其他对象时提供共享的属性或方法，被称为原型对象。
原型链：每一个对象创建时都有一个属性指向其原型对象，原型对象也有一个属性指向自身的原型对象，依次往上直到原型对象为null，这一系列的关联所形成的链条就叫做原型链。
访问原型对象：通过_proto_进行访问。
继承的方法：
原型链继承：将子类型构造函数的prototype属性指向父类型构造函数的实例。
缺点：1.子类型构造函数创建的一个实例修改的属性会被所有实例共享，造成管理混乱；2.子类型构造函数实例化时不能给父类型构造函数传参。
盗用构造函数继承：定义子类型构造函数时在内部对父类型构造函数执行call()或者apply()方法，这相当于在子类型构造函数内将父类型构造函数的初始代码运行了一遍，创建对应的属性和方法。
优点：可以向父类型构造函数传参。
缺点：必须先在父类型构造函数中定义方法，否则不会继承其原型对象上的方法。
组合继承：结合了原型链继承和盗用构造函数继承，使用原型链继承父类型构造函数的属性和方法，通过盗用构造函数继承设置子类型构造函数实例中属性的值。
优点：既实现了原型方法的重用，又让每个子类型构造函数的实例自定义内部属性的值。
原型式继承：通过Object.create()方法传入两个参数，第一个是作为新对象原型的对象，第二个是给新对象定义额外属性的对象。
寄生式继承：定义一个函数，接受一个对象并通过object()方法创建一个新对象，并为这个对象增加属性或方法，最终将该对象返回外部。
缺点：定义的函数难以重复利用。
寄生组合式继承：定义一个函数，通过object()方法创建父类型原型对象的副本，并将该副本的constructor指向子类型构造函数，再将该对象赋值给子类型构造函数的原型对象。

对DOM的理解

解释：文档对象模型，当浏览器会将HTML文档上的每一个元素转成一个对象，该对象支持使用javascript进行访问。document对象是整个DOM树的入口。
DOM树：HTML文档在被浏览器转成DOM对象的时候，会形成一个树结构，称为DOM树。
节点：类型有文档节点、元素节点、属性节点、文本节点、注释节点。
事件流：指页面接受事件的顺序，或者说事件的传播过程。
事件对象：当DOM元素触发事件后，会产生一个事件对象，包含了触发事件的元素、事件的类型、其他与事件相关的信息。
事件冒泡：事件触发后，从目标元素到document对象的过程。首先目标元素会调用事件处理程序，如果没有定义或者事件处理程序的结果返回true，则会向父元素传播，直到被处理完或者到达document对象。
阻止事件冒泡：使用事件对象的stopPropagation()方法进行阻止。
事件捕获：事件触发后，从document对象到目标元素之间的事件传递过程。
事件代理：利用事件冒泡，将子元素需要触发的事件绑定到父元素上，让父元素负责监听。
优点：1.减少事件数量，提高性能；2.未来新增加的元素也可以触发事件。

js的事件循环

解释：是指一种处理异步事件和回调函数的机制，用于管理任务队列和调用栈，来保证任务或回调函数能够按照正确的顺序被执行。
原因：js的单线程的，不能同时执行多个同步任务，在遇到异步操作时会出现阻塞。
分类：分为同步任务和异步任务。先执行同步任务，同步任务执行完之后才会执行异步任务。
同步任务：按照顺序依次执行的任务。
异步任务：在队列中等待执行的任务，如定时器回调函数、事件回调函数、Promise回调函数等。
异步任务具体又分为宏任务和微任务，微任务的执行优先级高于宏任务。当一个宏任务里的微任务都执行完之后，才会执行下一个宏任务。
宏任务：宿主环境发起的任务称为宏任务，如：DOM事件、定时器、网络请求、UI渲染、I/O操作。
微任务：JavaScript引擎发起的任务称为微任务，如：Promise、async/await。
事件循环流程：不断从任务队列中取出任务并执行，直到任务队列为空。
应用场景：、定时器回调函数、网络请求、Promise回调函数、async/await函数、Web Worker进程。

ES6的Promise

解释：Promise是ES6提供的一个异步编程解决方案，用来解决回调嵌套问题。
特点：
1.对象的状态不受外界影响。
2.状态一旦发生改变就无法修改。
状态分类：1.Pending待定，2.resolved解决，3.rejected拒绝。
基本用法：Promise构造函数接受一个函数作为参数，该参数接受两个resolve、reject，这两个参数都是函数。异步任务成功时调用resolve函数并将正确结果作为参数传递出去，失败时调用reject函数并将错误结果作为参数传递出去。
方法：
then：Promise使用then方法接收解决状态的响应数据。
catch：Promise使用catch方法接收拒绝状态的响应数据。
finally：Promise在解决状态或者拒绝状态时都会运行，用于清理数据。
Promise.resolve()：会初始化一个已解决的Promise实例，该实例可以使用then方法访问响应结果。
Promise.reject()：会初始化一个已拒绝的Promise实例，该实例可以使用catch方法访问响应结果。
合并Promise：Promise.all()和Promise.race()可以将多个Promise实例组合成一个Promise。该方法接受一个可迭代对象，并返回一个新的Promise。如果迭代对象中有值不是Promise实例，则会被包装成一个Promise实例。
Promise.all()：使用该方法创建的Promise会在包含的Promise都解决或拒绝之后再得到结果。若包含的Promise实例状态都变为解决，则变为解决状态；若包含的Promise有一个变为待定，则合成的Promise也会待定；若包含的Promise有一个变为拒绝，则合成的Promise合会拒绝。
Promise.race()：该方法创建的Promise会在返回一个包装的Promise，是一组Promise中最先解决或者拒绝的Promise的镜像。

ESM和CJS的区别

ESM：ESM是ES6之后的JS模块规范，使用import导入，export、export default到导出。
CJS：CJS是由社区发展起来的主要应用于node.js应用的模块规范，使用require导入，exports、module.exports导出。
设置项目模块规范：使用npm初始化的node.js项目中，通过设置package.json文件里的type字段来决定项目使用的模块规范。type不写则默认使用cjs加载，type设置为module则使用ESM加载。
差异：在ESM中，exports default被视为顶级导出，export被视为次级导出，两者不冲突，可同时使用；在CJS中，module.exports被视为顶级导出，exports被视为次级导出，两者同时使用时，顶级导出会覆盖次级导出。

xhr和fetch的区别

xhr：通过XMLHttpRequest()构造方法创建一个实例，可以监听这个实例的状态变化、onload事件、配置网络请求参数、发送网络请求。
创建实例：通过new XMLHttpRequest()创建一个异步对象实例，并赋值给一个变量。
监听状态：创建一个函数赋值给实例的onreadystatechange属性，该函数内通过实例的readyState属性去判断状态，通过实例的status属性判断网络响应码，根据实例状态和网络响应码进行对应的处理。
进度检查：通过创建一个函数赋值给实例的progress属性，该函数能接收到一个参数，根据这个参数获取响应数据并检查进度。
执行完成：通过onload在请求完成之后进行处理。
取消请求：通过调用实例的abort方法可以取消当前的网络请求。
超时设置：将实例的timeout属性设置为一个以毫秒为单位的整数，若请求在发出后在这个时间内未完成，将会被认定为超时失败。
fetch：featch是ES6提供的一个替代XMLHttpRequest的函数，该方法接受两个参数，第一个参数是要获取的资源，第二个参数是配置参数对象。fetch函数会返回一个Promise，可以使用then接受成功结果，catch接受失败结果。
配置参数：包括：method请求方法、headers请求头对象、body请求携带的数据、mode请求模式、credentials请求凭证、cache缓存模式。
相同点：
1.都是用于发送http请求的技术。
2.都能实现异步编程。
3.都支持json格式的数据传输，都能处理二进制数据。
差异点：
1.xhr使用浏览器原生的XMLHttpRequest，fetch使用的是Promise对象。
2.fetch请求默认不携带cookie，需要手动设置credentials属性；xhr请求会自动带上cookie。
3.fetch只会在网络错误的时候reject，无法取消一个正在进行的请求；xhr可以在超时、abort情况下结束请求。
4.fetch需要手动解析响应类型，xhr可以通过responseType属性手动设置响应类型。
5.fetch无法监听上传和下载进度，xhr可以支持。
6.fetch的兼容性没有xhr好。

文件上传的实现方法

理解：在html页面通过type为file的表单元素input获取文件后，可以通过表单上传或者异步请求将文件上传到服务器。
表单上传：在html中使用form标签进行上传，通过action属性设置上传地址，method属性设置上传方式，enctype属性设置请求体格式。然后通过type为submit的提交按钮点击上传。
异步请求上传：通过input获取文件后，在上传按钮绑定的事件中将获取的文件封装成二进制数据，再调用fetch或者xhr发送到服务器。
大文件上传：先通过input获取文件，再将文件按照固定大小分割成若干块，每一块都通过一个异步请求发送到服务器；上传完毕后服务器将所有文件块重新合并成一个完整的文件。如果服务器记录了上传成功的文件块编号，则可以对失败的文件块进行断点续传，否则不能。

对formdata数据格式的理解

解释：FormData是浏览器提供的API，用来构造和编辑表单键值对数据。该构造函数接受一个可选表单元素参数，如果省略则表示一个空表单，否则就会处理表单元素里的键值对数据。
作用：
1.将表单数据序列化，减少表单元素的拼接。
2.异步上传文件。
常用的实例方法：
FormData.get(key):根据键名获取第一个对应的键值，参数为键名。
FormData.getAll(key)：根据键名获取所有对应的键值，参数为键名，返回结果为对应键值组成的数组。
FormData.set(key,value)：设置指定键名的键值，第一个参数是键名，第二个参数是键值。如果键名不存在则会新增键值对，如果键名已存在则会覆盖对应的键值对。如果键值是文件，还可以穿第三个参数用于指定文件名称。
FormData.append(key,vallue)：追加一个键值对，第一个参数是键名，第二个参数是键值。如果键名已存在则会生成两个同名的键值对。如果键值是文件，还可以穿第三个参数用于指定文件名称。
FormData.delete(key)：删除一个键值对，参数为键名。
FormData.has(key)：检查是否有该键名的键值对，参数是键名，返回值是一个布尔值。
FormData.entries()：返回一个遍历器对象，用于for...of循环遍历素有键值对。

js的原生拖拽如何实现，使用了哪些属性，触发拖拽时都有哪些方法可以使用

解释：通过监听mousedown、mousemove、mouseup三个事件，根据事件对象获取鼠标的页面位置，计算出元素要放置的位置，再通过样式进行定位。

postMessage技术如何实现页面通信

解释：postMessage是HTML5提供的一个API（最低兼容IE8），允许两个来自不同源的脚本进行跨窗口通信。
用法：该方法接受两个参数，第一个参数为传递的信息对象，第二个参数为接受信息的窗口源（协议+主机号+端口号），如果第二个参数设置为*，则表示不限制窗口源，允许向所有的窗口发送。
场景：该方法常用于父子窗口通信。

如何渲染json文件到页面上

使用第三方库Lottie，按照官网的教程操作，项目中会引入该插件单独封装一个文件用于渲染json格式的动效。

大数据可视化的性能优化、json文件优化

1.压缩json文件
2.减少定时器的使用

页面加载的时候如何防止结构抖动

使用第三方UI库的骨架屏组件预展示，等待数据渲染之后再显示具体模块。

移动端相关

em、rem、vw、vh、px的含义

em：元素的字体大小，相对单位，随着元素字体大小变化而变化，对于元素来说1em就是1倍的fontSize。
rem：根元素的字体大小，相对单位，随着根元素html的字体大小而变化，1rem就是1倍的根元素fontSize。
px：像素，固定大小没有弹性，是网页的基本单位。
rpx：小程序里的屏幕尺寸单位，把屏幕分成多少分，一份就是1rpx。

不同的屏幕如何适配

vw/vh：按照设计稿尺寸将px按照比例转为vw和vh。
优点：动态计算元素宽高，当屏幕比例和设计稿不一致时不会出现白边。
缺点：需要编写公共转换函数，对echarts图标中的参数进行逐个换算，比较麻烦。
scale：通过设置根元素的scale属性，对整个页面进行等比缩放。
优点：代码量少，适配简单，不需要对echarts表格一个个单独配置。
缺点：当屏幕和设计稿比例不一致时会出现白边，比例过大时会模糊甚至导致事件触发区域偏移。
rem：通过设置html根元素的fontSize，获取1rem的基准值，并使用rem代替px构建页面。
优点：代码量少，适配简单。
缺点：屏幕和设计稿比例不一致时会出现白边，比例过大时还会模糊甚至导致事件触发区域偏移。

font-size如何计算，使用的插件都有哪些

可以通过postcss的插件postcss-px-to-viewport，根据设置的视口宽度，将px转成rem，完成对不同宽度屏幕的适配。

H5和原生APP通信

H5项目架构搭建

网络相关

WebSocket

解释：WebSocket是一个全双工通信协议，使用自定义协议ws和wss。
状态：readyState属性表示当前状态。
WebSocket.OPENING：0，连接正在建立。
WebSocket.OPEN：1，连接已经建立。
WebSocket.CLOSING：2，连接正在关闭。
WebSocket.CLOSE：3，连接已经关闭。
事件：
send()：向服务器发送字符串、ArrayBuffer、Bolb。
onmessage：接收服务器发来的消息，通过event.data访问消息中的数据。
onopen：在连接成功建立时触发。
onerror：在连接发生错误时触发。
onclose：在连接关闭时触发。

http三次握手和四次挥手

三次握手：就是创建TCP连接时，客户端和服务器之间总共要发送三个包以确认连接的建立，这个过程被称为三次握手。三次握手建立连接后，客户端就可以和服务器通信了。
第一次握手：客户端发送一个包到服务器，请求通信，等待服务器确认。
第二次握手：服务器收到向客户端的包后，也向客户端发送一个包，确认通信，准备等待连接确认。
第三次握手：客户端收到服务器的包后，确认连接，并向服务器发一个包通知连接开始。
四次挥手：断开TCP连接时，客户端和服务器之间总共要发送四个包以确认连接的断开，这个过程称为四次挥手。可以从客户端或服务器任意一方发起断开流程。以客户端为发起方为例：
第一次挥手：客户端向服务器发送一个包，关闭客户端到服务器的数据通道，同时客户端进入等待状态。
第二次挥手：服务器收到客户端的包后，向客户端发送一个包，表示收到消息。
第三次挥手：服务器向客户端发送一个包，关闭服务器到客户端的数据通道，同时服务器进入等待状态。
第四次挥手：客户端收到服务器的包后，进入停止状态，并向服务器发送一个包，服务器收到后也进入停止状态。

http和https的区别

安全性：http是明文传输协议，传输过程中存在被窃取和修改的安全隐患；https使用SSL/TLS加密传输协议，传输过程更安全。
证书申请：http无需申请证书，https需要申请CA证书。
连接方式：http是无状态的简单连接，https是进行了加密传输和身份验证的连接。
端口号：http使用80端口，https使用443端口。

网络请求的header分别有哪些属性

Origin：发起当前请求的地址
Host：用于指定要访问的服务器地址
Accept：用户可以处理的媒体类型
Referer：告知服务器请求的原始资源的url
Content-Type：指定请求的互联网媒体类型（也叫做MIME类型）
User-Agent：浏览器的详细信息，包括名称、版本、操作系统等

网络响应码都有哪些

1xx：临时响应并需要请求者继续执行操作
2xx：请求成功
200：服务器成功处理了请求。
3xx：表示需要进一步操作
301：请求的网页已移动到新位置，会自动将请求者转到新位置。
304：自从上次请求后，所请求网页未被修改过，不返回网页。
4xx：表示客户端错误
400：客户端错误请求。
401：客户端未授权，要求身份验证。
403：服务器禁止请求。
404：服务器未找到请求的资源。
5xx：表示服务器出错
500：服务器内部错误，无法完成请求。
502：错误网关。
503：服务不可用。
504：网关超时。
505：http协议版本不支持。

跨越产生的原因，有哪些解决方式

原因：为了保护用户信息安全，浏览器的同源策略限制了js脚本只能请求当前窗口所在域的数据。当协议、主机号、端口号其中一个不同就会引发同源策略，也就是跨域。
解决方法：
JSONP：利用script标签中src属性不受同源策略的特点，动态创建script标签，向目标域名发起请求，并将请求包装在要给函数中返回。
CORS：通过在服务器设置Access-Control-Allow-Origin响应头，表明允许哪些域名访问，浏览器就会对这些域放行。
服务器代理：在后台部署一个代理服务器，前端将跨域请求发送到代理服务器，代理服务器将请求转给目标服务器并拿到结果，再将结果返回给前端。

XSS攻击如何预防

解释：全称为跨站脚本攻击，攻击者通过将恶意代码注入用户页面中，使用户加载并执行攻击者制造的恶意代码。
预防：
输入预防：对用户输入进行防御，也就是对表示是html标签的<>等符号进行编码。
白名单：对请求资源进行白名单限制，阻止白名单以外的资源加载和运行。

前端数据加密如何实现

base64加密：将明文转为base64字符。
AES加密：前端可以使用crypto-js插件对数据进行加密。
MD5加密

浏览器相关

浏览器的缓存机制有哪些

强缓存：如果缓存资源没有过期，就使用缓存的资源；如果缓存资源过期了，就请求服务器资源。
cache-control：通过响应头的cache-control字段可以设置或判断缓存情况。
private：仅浏览器可以缓存
public：浏览器和服务器都可以缓存
max-age：缓存过期时间，单位为秒
no-cache：不进行强缓存
no-store：不进行强缓存，也不进行协商缓存
协商缓存：请求服务器资源时，如果资源没有更改，会返回304，浏览器读取本地缓存；如果资源有更改，则返回200，以及请求的资源。
触发条件：
1.cache-control的值为no-cache时，不使用强缓存，则会启用协商缓存。
2.强缓存时，max-age过期了，则启用协商缓存获取最新资源。
3.cache-control的值为no-cache时，不启用协商缓存。

浏览器存储数据的方式有哪些

cookie：用于存储小片段数据，如token，关闭浏览器不会被清除。
sessionStorage：将数据保存在内存中，关闭浏览器后会被清除。
localStorage：会将数据保存在硬盘中，关闭浏览器后不会被清除
IndexDB：主要用于存储结构化数据，关闭浏览器不会被清除。

vue相关

解释一下MVVM

解释：MVVM是一种构建用户界面的架构模式，核心思想是将视图和模型分离，通过中间的工具连接起来，简化代码逻辑。MVVM模型分为三个部分：
模型（Model）：应用程序中的数据和业务逻辑。
视图（View）：用户看到的界面以及行为交互。
视图模型（ViewModel）：连接视图和模型的中间桥梁，在模型变更时通知视图，也在视图改变时通知模型。

vue的双向绑定

解释：vue的双向数据绑定是一个语法糖，通过v-bind来绑定input、textarea、select等元素的value，通过v-on监听上述元素的input事件或change事件。当data对应的数据变化时同步修改元素的值，当手动修改元素的值时，也会同步变更data中对应的值。总的来说就是利用v-bind和v-on实现视图和数据的同步。
适用元素：input（当type为text、checkbox、radio时）、textarea、select。

vue2的watch和created谁先执行

在vue2中watch比created先执行，默认加载时会执行computed再执行watch，一切准备好后才调用created实例化组件。

vue的可写计算属性

计算属性computed通过匿名函数返回的值，默认是只读的。

const now = computed(() => Date.now())

通过对象可以设置可写的计算属性，可以通过同时提供 getter 和 setter 来创建。

<script setup>
import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

如何在vue里挂载全局方法

vue2：通过Vue.prototype.属性名/方法名 添加全局实例属性或方法。
vue3：通过app.config.globalProperties.属性名/方法名 添加全局实例属性或方法，app为vue实例。

解释一下vue的虚拟dom

解释：虚拟DOM是一个JavaScript对象，包含了渲染真实DOM所需要的数据、属性、节点等信息。根据虚拟DOM可以生成真实DOM，可以通过操纵虚拟DOM来操纵真实DOM。
作用：提供与真实节点对应的虚拟节点，发生差异时将新旧虚拟节点对比，以最小的代价更新视图。

说说vue的diff算法

解释：当数据发生变化时，render会生成新旧两棵虚拟DOM树，并对这两棵虚拟DOM树进行逐行比较并记录差异。这些差异会被记录在patch对象中，比较完成后会更新视图。
特点：比较只会在同层级进行，不会跨层级；比较时从两棵树的两侧向中间进行比较，每次只比较一个节点。

vue2和vue3的不同

响应式原理：vue2通过使用Object.defineProperty进行数据劫持，结合发布订阅模式实现的；vue3通过使用Proxy代理，将定义的数据转为响应式数据。
属性监听：vue2只能监听对象的某个属性，vue3可以监听整个对象；
API：vue2只能用选项式api，vue3增加了组合式api；
组件根节点数量：vue2的template模板里只能有一个根节点，vue3的template模板可以有多个根节点。

vue首次白屏如何处理

通过配置vite或者webpack，将js文件进行chunk分割，减少第一次页面加载的耗时，加快响应速度。

vueRouter有几种模式

Hash：vueRouter的默认模式，会导致锚点失效、书写不优雅。
History：简洁、可以不刷新页面改变url地址。

pinia是什么

解释：是一个vue的公共状态管理库，用于取代vuex。分别有state、getter、action三个概念。
state：用于存储数据。
getter：相当于计算属性，用于计算数据并返回。
action：相当于方法，用于执行业务逻辑。

vite和webpack的区别

启动速度：vite启动速度比webpack快。webpack会对所有文件进行解析、识别依赖、打包代码，打包完成后再启动服务并加载模块代码；Vite是首先启动服务，然后通过浏览器原生ES模块导入当前页面所需文件资源，让浏览器进行解析工作。
热更新速度：vite热更新速度比webpack更快。webpack热更新时会重新打包整个项目，vite则只会对有修改的模块进行更新。
配置复杂度：webpack配置比vite复杂。webpack配置比较复杂，需要根据项目配置各种插件和加载器来实现功能；vite配置相对简单，内置了基本的插件和加载器，可以快速开发。
生态环境：webpack生态更加成熟，社区中拥有丰富的插件库；vite插件相对较少。

vite常用的插件都有哪些

vite-plugin-html：将html文件作为输出文件使用，配置js文件入口。
vite-plugin-compression：用于打包压缩资源。
rollup-plugin-visualizer：用于查看用来代码的依赖关系。

vite如何配置代理

在vite.config.js文件中修改配置参数对象，在参数对象的server属性中增加一个proxy对象，以异步请求的基准路径的字符串值作为键名创建配置一个对象，配置target为本机地址，changeOrigin设置为true，rewrite赋值一个函数将路径重写。

性能优化

优化项目构建速度

减少项目打包体积

前端工程化

jenkins自动化打包构建。先从gitlab拉去分支代码，再打成dist包并放到对应文件夹。