跨域
跨域：首先同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源,jsonp，iframe标签的src属性，前端nginx配置反向代理，nodejs中间件代理跨域或者设置cors允许所有域名访问，前端使用webpack devserver中的proxy选项来设置代理，websocket不受同源策略限制。
This指向
在全局作用域中，this 指向全局对象（在浏览器环境中通常是 window 对象）。
在函数中，this 的值取决于函数的调用方式。
如果函数是作为对象的方法调用，this 指向调用该方法的对象。
如果函数是作为普通函数调用，this 指向全局对象（非严格模式下）或 undefined（严格模式下）。
如果函数是通过 call、apply 或 bind 方法调用，this 指向 call、apply 或 bind 方法的第一个参数所指定的对象。
如果函数是作为构造函数调用（使用 new 关键字），this 指向新创建的对象。
在箭头函数中，this 的值是继承自外部作用域的，它不会因为调用方式的改变而改变。
作用域
作用域链是一种用于查找变量和函数的机制，它是由当前执行环境和其所有父级执行环境的变量对象组成的链式结构。当在一个执行环境中访问变量或函数时，会首先在当前执行环境的变量对象中查找，如果找不到，则会沿着作用域链向上查找，直到找到对应的变量或函数，或者达到最外层的全局对象（如window）。
作用域链的创建是在函数定义时确定的，它与函数的定义位置有关。当函数被调用时，会创建一个新的执行环境，其中包含一个新的变量对象，并将其添加到作用域链的前端。这样，函数内部就可以访问其所在作用域以及其外部作用域中的变量和函数，形成了一个作用域链。
原型链
每个对象都会在其内部初始化一个属性，就是__proto__，当我们访问一个对象的属性时
如果这个对象内部不存在这个属性，那么他就会去__proto__里找这个属性，这个__proto__又会有自己的__proto__，于是就这样一直找下去，也就是我们平时所说的原型链的概念。按照标准，proto 是不对外公开的，也就是说是个私有属性
关系：instance.constructor.prototype == instance.proto
TS实现接口
export interface ICategoryList {
id: number;
name: string;
pid: number;
gmt_create: string;
gmt_modified: string;
level: Level | null;
subCategoryList?: ICategoryList[];
}
定位
position 属性用于控制元素的定位方式，常用的取值包括：
static：默认值，表示元素在文档流中正常定位，不会受到 top、right、bottom、left 属性的影响。
relative：生成相对定位的元素，相对于其正常位置进行定位，通过设置 top、right、bottom、left 属性来调整元素的位置，不会脱离文档流，周围的元素仍然会按照正常布局进行排列。
absolute：生成绝对定位的元素，相对于最近的非 static 定位的父元素进行定位，如果没有非 static 定位的父元素，则相对于文档根元素（即浏览器窗口）进行定位。绝对定位的元素会脱离文档流，不占据空间，可以通过设置 top、right、bottom、left 属性来精确控制元素的位置。
fixed：生成绝对定位的元素，相对于浏览器窗口进行定位，不会随着页面的滚动而改变位置。可以通过设置 top、right、bottom、left 属性来指定元素的位置。
inherit：规定从父元素继承 position 属性的值。
对于 relative 和 absolute 定位，其原点（坐标基准点）是元素在正常文档流中的位置。通过调整 top、right、bottom、left 属性，可以相对于原点在水平和垂直方向上进行偏移，实现元素的精确定位。
css实现两栏布局
// 左边定宽，右边自适应方案
float + margin，float + calc
/* 方案1 */
.left {
width: 120px;
float: left;
}
.right {
margin-left: 120px;
}
/* 方案2 */
.left {
width: 120px;
float: left;
}
.right {
width: calc(100% - 120px);
float: left;
}
flex布局
display: flex;
// 容器的6个属性：
flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content
flex-direction属性有4个值
row（默认值）：主轴为水平方向，起点在左端（项目从左往右排列）。
row-reverse：主轴为水平方向，起点在右端（项目从右往左排列）。
column：主轴为垂直方向，起点在上沿（项目从上往下排列）。
column-reverse：主轴为垂直方向，起点在下沿（项目从下往上排列）。
https://blog.csdn.net/wwwjjjjj666/article/details/128033184
BOM跟DOM
BOM（浏览器对象模型）提供了与浏览器窗口交互的接口，如操作浏览器历史记录、定时器等
window.location.href = "https://www.example.com";
let screenWidth = window.screen.width;
let timer = setTimeout(function() {
console.log("Timer expired");
}, 5000);
DOM是JavaScript操作网页内容和结构的接口，可以通过DOM来增删改查网页元素
let element = document.getElementById("myElement");
element.innerHTML = "New content";
let newElement = document.createElement("div");
newElement.textContent = "Dynamic element";
document.body.appendChild(newElement);
防抖和节流
防抖函数原理：把触发非常频繁的事件合并成一次去执行 在指定时间内只执行一次回调函数，如果在指定的时间内又触发了该事件，则回调函数的执行时间会基于此刻重新开始计算
适用场景：
文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好
按钮提交场景：防止多次提交按钮，只执行最后提交的一次
服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似
节流函数原理:指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。总结起来就是：事件，按照一段时间的间隔来进行触发。
适用场景：
拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动。DOM 元素的拖拽功能实现（mousemove）
缩放场景：监控浏览器resize
滚动场景：监听滚动scroll事件判断是否到页面底部自动加载更多
动画场景：避免短时间内多次触发动画引起性能问题
冒泡顺序
事件流分为三个阶段：捕获阶段、目标阶段和冒泡阶段。
捕获阶段（Capture Phase）：事件从最外层的父节点开始向下传递，直到达到目标元素的父节点。在捕获阶段，事件会经过父节点、祖父节点等，但不会触发任何事件处理程序。
目标阶段（Target Phase）：事件到达目标元素本身，触发目标元素上的事件处理程序。如果事件有多个处理程序绑定在目标元素上，它们会按照添加的顺序依次执行。
冒泡阶段（Bubble Phase）：事件从目标元素开始向上冒泡，传递到父节点，直到传递到最外层的父节点或根节点。在冒泡阶段，事件会依次触发父节点、祖父节点等的事件处理程序。
cookie作用
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存
存储大小：
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
有期时间：
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除
cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
vue中的用户权限
接口权限
用户登录成功后可以得到一个token，将token存起来，通过axios请求拦截器进行拦截，请求头里要携带token
菜单权限 后端返回菜单
按钮权限
按钮权限也可以用v-if判断
发布订阅模式（Publish-Subscribe Pattern）：
优点：解耦了发布者和订阅者，使它们可以独立变化。增加了代码的灵活性和可维护性。
缺点：可能会导致发布者过度发布消息，造成性能问题。订阅者需要订阅和取消订阅相关的逻辑。
适用场景：当存在一对多的关系，一个对象的状态变化需要通知多个其他对象时，可以使用发布订阅模式。
同步和异步的区别
同步：浏览器访问服务器请求，用户看得到页面刷新，重新发请求,等请求完，页面刷新，新内容出现，用户看到新内容,进行下一步操作
异步：浏览器访问服务器请求，用户正常操作，浏览器后端进行请求。等请求完，页面不刷新，新内容也会出现，用户看到新内容
常见的异步操作包括网络请求（Ajax）、定时器（setTimeout、setInterval）、事件处理等。在这些异步操作中，任务的执行不会阻塞程序的其他部分，而是在后台进行，当任务完成时，会通过回调函数或事件来通知程序进行下一步操作。
总结：同步操作是按照顺序依次执行任务；异步操作是通过回调函数或事件触发来执行任务，不会阻塞程序的执行，提高了程序的并发性和响应性。在实际开发中，异步操作通常用于处理耗时操作和需要等待结果的任务，以提高程序的性能和用户体验。
websocket跟ajax区别
共同点：Ajax和websocket都是进行前后端数据通信的工具；
1、生命周期不同
websocket是长连接，会话一直保持。
ajax是短连接，发送端接收之后就会断开。
2、使用范围
websocket适用于前后端实时交互数据。
ajax是非实时交互数据。
3、发起人
websocket是服务器和客户端相互推送。
ajax是客户端发起。
axios和ajax的区别
axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
ajax是一种技术统称，基于原生的XHR开发，已经有了fetch的替代方案。
fetch是一个原生的API，用于进行网络请求，支持Promise API，但在某些方面功能较为简单，需要进行封装来处理错误、超时等情况。
ref和refs的区别
ref作用于组件：获取子组件的信息
this.$refs获取子组件的信息
div实现水平垂直居中
/** 1 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin: -50px 0 0 -50px;
}
}
/** 2 **/
.wraper {
position: relative;
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
/** 3 **/
.wraper {
.box {
display: flex;
justify-content:center;
align-items: center;
height: 100px;
}
}
/** 4 **/
.wraper {
display: table;
.box {
display: table-cell;
vertical-align: middle;
}
}
水平居中的方法
元素为行内元素，设置父元素text-align:center
如果元素宽度固定，可以设置左右margin为auto;
绝对定位和移动: absolute + transform
使用flex-box布局，指定justify-content属性为center
display设置为tabel-cell
垂直居中的方法
将显示方式设置为表格，display:table-cell,同时设置vertial-align：middle
使用flex布局，设置为align-item：center
绝对定位中设置bottom:0,top:0,并设置margin:auto
绝对定位中固定高度时设置top:50%，margin-top值为高度一半的负值
文本垂直居中设置line-height为height值
inline-block兄弟元素：通过在父元素中插入一个inline-block元素，并设置其垂直对齐方式为middle来实现垂直居中
vue的$nexttick作用
nextTick 可以让我们在下次 DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM
vue2和vue3的主要区别在于以下几点：
1、生命周期函数钩子不同
2、数据双向绑定原理不同
3、定义变量和方法不同
4、指令和插槽的使用不同
5、API类型不同
vue2选项型api（在代码中分割不同属性：data，computed，methods等）
vue3组合型api（使用方法进行分隔，显得更加简便整洁）
6、是否支持碎片
vue3可以有多个根节点
7、父子之间传参不同
8、main.js文件中部分设置不同
vue3的ref跟reactive的区别
ref
ref 和 reactive:
相同：创建一个响应式对象。
不同：
reactive 接受入参必须是对象形式，而 ref 可以是对象形式，也可以是一个单值。
读取/赋值不一样，ref 必须从.value 属性中读取值
ref存在异步问题
toRef 和 toRefs :
toRefs 只会为源对象中包含的 property 生成 ref, 将对象转换为普通对象，且不丢失对源对象的响应式链接，即修改源对象属性值，生成的新的普通对象的对应属性值(ref)也会修改，反之亦然。
toRef 为特定的 property 创建 ref, 同样也会保持响应式链接。
watch跟computed的区别
功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
1、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
2、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
3、computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.
watch与computed区别总结
computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作
computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作
computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器
谈谈你对ES6的理解
ES6（ECMAScript 2015）是JavaScript的第六个主要版本，引入了许多新的语言特性和改进，以提升开发人员的效率和代码质量。以下是ES6的一些重要特性：
块级作用域：引入let和const关键字，允许在块级作用域中声明变量，解决了变量提升和作用域污染的问题。
箭头函数：使用箭头(=>)定义函数，简化了函数的书写，并且自动绑定了this。
模板字符串：使用反引号（`）包裹字符串，可以在字符串中使用变量和表达式，实现更灵活的字符串拼接和格式化。
解构赋值：通过解构赋值语法，可以从数组或对象中提取值，并赋给对应的变量，简化了变量赋值的操作。
默认参数：函数可以定义默认参数值，简化了函数调用时传参的操作。
扩展运算符：使用三个点（…）进行数组和对象的展开操作，可以将一个数组或对象拆分为独立的元素，或者将多个数组或对象合并为一个。
Promise：引入了Promise对象，用于更好地处理异步操作，解决了回调地狱的问题，并提供了更清晰的异步编程模式。
类和模块化：ES6引入了类的概念，可以使用class关键字定义类，实现了更接近传统面向对象编程的方式。同时，ES6还提供了模块化的支持，可以使用import和export语法导入和导出模块。
模块化：引入了模块化的概念，可以使用import和export语法导入和导出模块，提供了更好的代码组织和模块复用的方式。
迭代器和生成器**：引入了迭代器和生成器的概念，可以通过自定义迭代器来遍历数据集合，并使用生成器函数来生成迭代器。
管道操作符：提案阶段的特性，引入了管道操作符(|>)，可以将表达式的结果作为参数传递给下一个表达式，简化了函数调用和方法链的写法。
如何创建块级格式化上下文(block formatting context),BFC有什么用
要创建一个块级格式化上下文（BFC），可以应用以下方法：
1、使用float属性： 将元素的float属性设置为除none以外的值，可以创建一个BFC。
2、使用overflow属性： 将元素的overflow属性设置为除visible以外的值，例如auto或hidden，可以创建一个BFC。
3、使用display属性： 将元素的display属性设置为inline-block、table-cell、table-caption等特定的值，可以创建一个BFC。
4、使用position属性： 将元素的position属性设置为absolute、fixed、relative或sticky，可以创建一个BFC。
5、使用contain属性： 将元素的contain属性设置为layout，可以创建一个BFC（仅适用于部分浏览器）。
在IE下, Layout,可通过zoom:1 触发
BFC布局与普通文档流布局区别 普通文档流布局:
浮动的元素是不会被父级计算高度
非浮动元素会覆盖浮动元素的位置
margin会传递给父级元素
两个相邻元素上下的margin会重叠
数组去重方法总结
方法一、利用ES6 Set去重（ES6中最常用）
方法二、利用for嵌套for，然后splice去重（ES5中最常用）
方法三、利用indexOf去重
方法四、利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对
方法五、利用includes
方法六、利用hasOwnProperty
方法七、利用filter
方法八、[…new Set(arr)]
JS深浅拷贝
浅拷贝
1、使用 Object.assign() 方法
2、使用展开运算符
深拷贝
- 使用递归实现深拷贝函数
- 使用第三方库 lodash 的 cloneDeep() 方法
- 使用 JSON.parse(JSON.stringify()) 实现深拷贝
微任务跟宏任务
微任务
process.nextTick
promise
Object.observe
MutationObserver
宏任务
script
setTimeout
setInterval
setImmediate
I/O
UI rendering
浏览器会先执行一个同步任务然后宏任务，接下来有异步代码的话就先执行微任务
服务端渲染和客户端渲染的区别
服务端渲染：DOM树在服务端生成，然后返回给前端。
客户端渲染：前端去后端取数据生成DOM树。
服务端渲染的优点：
1、尽量不占用前端的资源，前端这块耗时少，速度快。
2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。
服务端渲染的缺点：
1、不利于前后端分离，开发的效率降低了。
2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。
客户端渲染的优点：
1、前后端分离，开发效率高。
2、用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
客户端渲染的缺点：
1、前端响应速度慢，特别是首屏，这样用户是受不了的。
2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。
ts与js区别是什么呢？
1、TS对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
2、TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
3、TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
4、相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；
TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；
TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；
同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。
watch和watchEffect的区别
两者都可以监听data属性变化
watch需要明确监听哪个属性
watchEffect会根据其中的属性，自动监听其变化
reactive和ref区别
1、 从定义数据方面：
ref通常用来定义基本类型数据
reactive用来定义：对象（或者数组）类型数据
ref也可以用来定义对象或者数组类型的数据，内部会通过reactive转为代理对象
2、从原理方面：
ref通过Object.defineProperty()的get和set实现数据代理。
reactive使用Proxy实现数据代理，并且通过Reflect操作源对象内部的数据。
3、从使用方面：
ref操作数据需要.value，template模板中不需要。
reactive都不需要,value