1.什么是重绘和回流
1.重绘
简单来说就是重新绘画，当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是颜色或背景变了，就会重新渲染页面，这就是重绘。
2.回流
当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后再次进行渲染，这就是回流。
总结
重绘不会引起dom结构和页面布局的变化，只是样式的变化，有重绘不一定有回流。
回流则是会引起dom结构和页面布局的变化，有回流就一定有重绘。
不管怎么说都是会影响性能。
怎么进行优化或减少？
1.多个属性尽量使用简写，例如：boder可以代替boder-width、boder-color、boder-style
2.创建多个dom节点时，使用documentfragment创建
3.避免使用table布局
4.避免设置多层内联样式，避免节点层级过多
5.避免使用css表达式
6.将频繁重绘或回流的节点设置为图层，图层能够阻止该节点的渲染行为影响到别的节点（例：will-change\video\iframe等标签），浏览器会自动将该节点变为图层
2.项目中的跨域如何处理的？
在Web开发中，跨域是指在一个域名下的文档或脚本试图去请求另一个域名下的资源。浏览器出于安全考虑，会禁止跨域请求。为了处理跨域问题，可以采用以下几种方法：
- JSONP：通过在页面上动态创建 标签，利用JavaScript的特性，在回调函数中处理返回的数据。
- CORS：使用CORS（Cross-Origin Resource Sharing）协议，服务器端设置Access-Control-Allow-Origin响应头来允许其他域名下的请求。
- 代理：在服务器端设置代理，将客户端的跨域请求转发到目标服务器进行处理，并将结果返回给客户端。
- Nginx反向代理：通过Nginx反向代理服务器，将客户端请求转发到目标服务器进行处理，并将结果返回给客户端。同时，可以通过配置Nginx实现负载均衡和缓存等功能。
以上四种方法各有优劣，需要根据项目的具体情况选择合适的方式来解决跨域问题。
3.防抖与节流，什么场景用？
-
防抖（debounce）：在用户频繁触发某个事件时，防抖可以让事件只在最后一次触发后执行。比如，搜索框输入关键字时，我们不希望每输入一个字符就进行一次搜索，而是等待用户输入完毕后再进行搜索。
-
节流（throttle）：当一个事件被频繁地触发时，节流可以控制事件的触发频率，让事件以一定的频率执行。比如，在页面滚动时，我们不希望每滚动一丝就出现大量计算或渲染操作，而是让这些操作以一定的频率进行，减少浏览器的负担。****
总的来说，防抖适用于需要对连续事件进行限制的场景，如输入、拖动等；而节流适用于需要对连续事件进行分批处理的场景，如滚动、鼠标移动等。根据具体的业务需求和效果要求，选择适合的方式进行实现。
4.怎么对axios进行二次封装？
首先，我们需要明白为什么需要二次封装axios，在我们项目的实际开发过程中需要token，我们对于每个请求都需要附带一个请求字段 Authorization，但是我们不可能在每个请求的时候都写一遍，所以我们就需要利用axios的请求拦截，为我们的请求附带上Authorization字段。
其次，在后端服务为我们返回的响应中，我们会接收到对应的返回状态码，我们需要对这些状态码进行判断，并且需要展示给用户，例如状态码401，代表token过期。我们可以利用axios的响应拦截自动识别状态码，并且将对应的信息展示给用户，提高我们的开发效率。
最后，axios二次封装可以规范我们的请求风格，我们只需要传递一个options对象，对象包含请求方法method，请求参数data，请求路径url…。我们只需要传递这样一个对象，即可快速完成一个请求。
总体来说，二次封装axios能帮助我们规范化、快速化地完成一个服务请求。
以下对axios进行二次封装的具体步骤
1.创建一个axios实例对象。
2.对axios请求进行请求拦截。
3.进行响应拦截。
4.封装请求方法。
5.导出axios实例对象。
6.将axios实例对象挂载到vue原型上，方便使用。
对于使用我们封装完的axios，只需要在项目根目录下的main.js中进行挂载即可。
/**
* 封装axios请求
*/
import axios from 'axios';
import config from './../config'//环境配置封装文件
import {ElMessage} from 'element-plus'
import router from './../router'
import storage from './storage' //localStorage的二次封装
const TOKEN_INVALID = 'Token验证失败，请重新登录';
const NETWORK_ERROR = '网络请求异常，请稍后再试'
//创建axios实例对象，添加全局配置
const service = axios.create({
baseURL:config.baseApi,
timeout:8000,
})
//请求拦截
service.interceptors.request.use((req)=>{
//TODO:这里做一些请求拦截的处理
const headers = req.headers;//获取请求头
const {token} = storage.getItem('userInfo');//获取本地存储中的userInfo，解构出token
if(!headers.Authorization) headers.Authorization = `Bearer ${token}`;//附带上auth请求字段
return req;//返回请求对象
})
//响应拦截
service.interceptors.response.use((res)=>{
//TODO:这里做一些响应拦截
const {code ,data ,msg} = res.data;
if(code === 200){
return data;//若请求返回状态码为200，直接返回data数据，不用再返回响应对象res
}else if(code === 50001){
//token过期
ElMessage.error(TOKEN_INVALID);
setTimeout(()=>{
router.push('/login');
},1500)
return Promise.reject(TOKEN_INVALID);//重点！需要返回一个Promise的reject对象。
}else{
ElMessage.error(msg || NETWORK_ERROR);
return Promise.reject(msg || NETWORK_ERROR);
}
})
/**
* 请求核心函数
* @param {*} options 请求配置
* @returns axios实例对象
*/
function request(options){
options.method = options.method || 'get';//默认为get请求方法
if(options.method.toLowerCase() === 'get'){//如果为get请求方法，需要将data转化为params
options.params = options.data;
}
let isMock = config.mock;//查看是否使用mock接口
if(typeof options.mock != 'undefined'){
isMock = options.mock;
}
if(config.env === 'prod'){
service.defaults.baseURL = config.baseApi
}else{
service.defaults.baseURL = isMock? config.mockApi : config.baseApi
}
return service(options)//返回一个Promise对象
}
/**组件中调用request方法
this.$request({
url: "/users/login",
method: "post",
data: {},
mock:false,
}).then((res)=>{}).catch((err)=>{})
*/
//导出axios实例对象
export default request;
说一下Vue的优点
Vue 是一个构建数据驱动的 Web 界面的渐进式框架。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。 关于 Vue 的优点，主要有响应式编程、组件化开发、虚拟 DOM
- 响应式编程
这里的响应式不是 @media 媒体查询中的响应式布局，而是指 Vue 会自动对页面中某些数据的变化做出响应。这也就是 Vue 最大的优点，通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 DOM 对象，有更多的时间去思考业务逻辑。
- 组件化开发
Vue 通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件（component）中，我们只要先在父级应用中写好各种组件标签（占坑），并且在组件标签中写好要传入组件的参数（就像给函数传入参数一样，这个参数叫做组件的属性），然后再分别写好各种组件的实现（填坑），然后整个应用就算做完了。 组件化开发的优点：提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。
- 虚拟 DOM
在传统开发中，用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致在性能上面的开销特别的高。 而 Virtual DOM 则是虚拟 DOM 的英文，简单来说，他就是一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM。最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。
- 响应式编程
这里的响应式不是 @media 媒体查询中的响应式布局，而是指 Vue 会自动对页面中某些数据的变化做出响应。这也就是 Vue 最大的优点，通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 DOM 对象，有更多的时间去思考业务逻辑。
组件化开发的优点：提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。
