面试题合集

作者：ikunikunikun

前端面试题

1.css

1. 说一下CSS的盒模型。

页面是由一个个元素组成的，这些元素我们也可以称为盒子。 盒模型具体分为浏览器盒模型和ie盒模型 浏览器盒模型分为:margin、border、padding、content ie盒模型分为:margin、border、content(border、padding) 两者的区别在于content的不同，IE盒模型的content包括border、padding

2. CSS选择器的优先级？

ID选择器>类名选择器>标签选择器>全局选择器

3. 隐藏元素的方法有哪些？

• 调整透明度(opacity)

.element {
  opacity: 0;
}

• 控制元素的可见性(visibility)

.element {
  visibility: hidden;
}

• 控制元素不展示(display)

.element {
 display: none;
}

• 控制元素图层(z-index)

.element {
  z-index: 1;
}

• 使用定位将元素移出视口(position)

.element {
  position: absolute;
  left: -10000px;
}

4. px和rem的区别是什么？

px:固定长度单位，不随其它元素的变化而变化 em:相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化,通常设置font-size:62.5%,这样1rem=10px

5. 重绘重排有什么区别？

浏览器的重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程。 重排:重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息,是重新计算网页布局的过程。 重绘:元素的位置和尺寸等属性不变的情况下,重新绘制元素的样式,是根据新的布局信息重新绘制网页的过程。

6. 让一个元素水平垂直居中的方式有哪些？

• 使用margin

.element {
    margin: 0 auto
}

• flex弹性布局,将该元素的父元素设置上以下属性

.element {
  display: flex;
  align-items: center;
  justify-content: center;
}

• 使用定位(position)和移动(transform 父元素设置了position:relative)

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); //移动元素自己宽高的一半
}

7. CSS的哪些属性哪些可以继承？

以下是一些常见的CSS属性，它们可以继承：

• 字体属性（font）
• 文本属性（text）
• 颜色属性（color）
• 列表属性（list）
• 表格布局属性（table-layout）
• 元素可见性属性（visibility）

8. 有没有用过预处理器？

什么是css预处理器:CSS预处理器是一种用于增强和扩展CSS语言的工具。它们引入了变量、嵌套、函数、条件语句等编程概念，使得编写和维护CSS代码更加高效和可维护。预处理器会将编写的预处理器代码转换为标准的CSS代码，从而可以在浏览器中正常使用。 ⭐️目前最常用的css预处理有sass和less。

2.js

1. JS由哪三部分组成？

JavaScript由ECMScript、BOM和DOM组成。

• 核心语法(ECMAScript)

ECMAScript是一套标准，定义了一种语言的标准，规定了基本语法、数据类型、关键字、具体API的设计规范等，解析引擎设计的参考标准，但与具体实现无关，是JavaScript的核心。

• 浏览器对象模型（BOM）

BOM是一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

• 文档对象模型（DOM）

DOM是一套操作页面元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

2. 操作数组的方法有哪些？

常见操作数组的api:pop,push,shift,unshift,reverse,sort,splice,concat,slice,join,find,filter,some,reduce等 破坏型api:pop,push,shift,unshift,reverse,sort,splice

3. 说一下闭包，闭包有什么特点？

闭包:在一个函数的内部存在一个函数调用了外层函数的变量，这样就形成了闭包(一般会将内层函数return出去给外界使用，但是外界只能通过这个函数使用变量并不能改变变量)。

• 优点： 私有变量 避免全局变量的污染 变量长期驻扎在内存中，防止私有变量被垃圾回收机制回收
• 缺点： 闭包比普通函数占用更多的内存，会造成内存泄漏；在不使用时，要及时释放，将引用内层函数对象的变量赋值为null。

4. 事件委托是什么？

事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

5. 基本数据类型和引用数据类型的区别？

基本数据类型:Undefined,Null,Boolean,Number,String。 引用数据类型:Object,Arry 区别:基本数据类型直接将值存在栈中，而引用数据类型把值存在堆中，把地址存在栈中。

6. 说一下原型链。

1.原型:函数都有prototype属性,称之为原型，也称为原型对象 原型可以放一些属性和方法，共享给实例对象使用 原型可以做继承 2.原型链:对象都有__proto__ 属性,这个属性指向它的原型对象,原型对象 也是对象,也有 proto 属性,指向原型对象的原型对象,这样一层一层 形成的链式结构称为原型链，最顶层找不到则返回 null

7. new操作符具体做了什么？

(1) 创建一个新对象 (2) 将构造函数的作用域赋给新对象 (3) 执行构造函数中的代码 (4) 返回新对象

8. setTimeout最小执行时间是多少？

chrome 和 safari 中最小时间为1ms，而Firefox 65.0.1 和 IE 11是最小的延迟时间为0ms

9. ES6的新特性有哪些？

1.let和const 2.基本数据类型:symbol,引用数据类型:map 3.模板字符串 4.扩展运算符 5.箭头函数 6.定义类的语法糖(class) 7.promise和proxy

10. call,aply,bind三者有什么区别？

都是改变this指向和函数的调用，call和apply的功能类似，只是传参的方法不同 call方法传的是一个参数列表 apply传递的是一个数组 bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的，bind()() call方法的性能要比apply好一些，所以call用的更多一点

11. 如何实现一个深拷贝？

json序列化(JSON.parse(JSON.toString(Obj)))

12. 说一下事件循环。

Js的执行是单线程的，防止阻塞，将事件分为同步/异步 Js的同步代码会优先放在执行栈里面执行，异步代码则是存放在宿主环境中 异步代码在时机成熟后会进入任务队列中 执行栈中的代码执行完之后就会去任务队列查看是否有任务 执行栈拿到任务对列里的任务执行完之后又会去任务队列中去查找是否有任务，这样的反复去拿事件执行的过程叫做事件循环

13. get和post有什么区别？

1.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据） post请求一般是去提交数据。 2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内 post请求是没有的长度限制，请求数据是放在body中； 3.get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求 4.get请求可以被缓存，post请求不会被缓存 5.get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，但post不能。它的参数不在url中 6.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）

14. promise和async await的区别是什么？

1.语法不通 2.错误处理不同 3.并发处理能力不同 Promise 并行执行多个异步操作 async/await 串行执行异步操作

15. 浏览器的存储方式有哪些？

浏览器常见的存储方式:sessionStroge,localStroge,cookie

16. token存在sessionstorage还是loaclstorage？

1.Cookie：将token存储在cookie中是一种常见的做法。这种方式的优点是，即使在浏览器关闭后，cookie仍然存在，因此用户可以保持登录状态。 2.SessionStorage：将token存储在sessionStorage中的优点是，它只在当前会话中存在，当用户关闭浏览器后，sessionStorage中的数据将被清除。这种方式的缺点是，如果用户在浏览器中打开新的标签页或窗口，那么新的页面将无法访问sessionStorage中的数据。 3.LocalStorage：将token存储在localStorage中的优点是，即使在浏览器关闭后，localStorage中的数据仍然存在，因此用户可以保持登录状态。此外，localStorage中的数据可以在同一浏览器的所有标签页和窗口中共享。

17. token的登录流程。

客户端使用用户名和密码请求登录,服务端收到请求,验证登录是否成功 验证成功后,服务端会返回一个Token给客户端,反之,返回身份验证失败的信息 客户端收到Token后把Token用一种方式存储起来,每次发起请求时都会将Token发给服务端 服务端收到请求后,验证Token的合法性,合法就返回客户端所需数据，反之，返回验证失败的信息

18. 防抖和节流是什么？

防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始计时。 节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

19. 解释一下什么是json？

JSON(JavaScript Object Notation):JS对象简谱 , 是一种轻量级的数据交换格式。

20. 精灵图和base64的区别是什么？

精灵图:网页处图图片的一种方式，它是把多张小图整合到一张。 base64:最常见的用于传输8Bit字节代码的编码方式之一，将原本二进制形式转成以64个字符基本单位，所组成的一串字符串。

3.vue

1. v-if和v-show的区别？

v-if:控制节点是否渲染 v-show:控制元素的dispaly属性 如果需要反复隐藏显示某个节点最好用v-show,v-if相交v-show更消耗性能

2. 如何理解MVVM的？

M(model 模型层):存储页面中的参数和方法 V(view 视图层):用于展示给用户的界面 VM(view-model 视图模型层):通过双向绑定来沟通M(model)和V(view),当视图中的数据更新时,模型层中的数据也会相应更新,反之模型层中的数据更新后视图层中的数据也会随之更新。

3. v-for中的key值的作用是什么？

确保遍历出的每一个元素的唯一性。 ⭐️确保每个key值唯一

4. 说一下你对vue生命周期的理解。

vue生命周期大致分为4个阶段:创建(creat),挂载(mount),更新(update),销毁(destroy) 细分可分为: beforCreat created beforMount mounted beforUpdate updated beforDestory destoried 如果使用了keep-alive这个组件则会多出deactive 和 actived

5. 在created和mounted去请求数据，有什么区别？

created只是初始化了数据但是没有挂载节点,而mounted节点已经挂载好了 在created中请求数据的请求和响应速度都比在mounted中请求快 若是想拿到挂载后的数据则需要在mounted中去请求数据

6. vue中的修饰符有哪些？

表单修饰符,事件修饰符,表格修饰符,鼠标修饰符,键盘修饰符,v-bind修饰符

7. elementui是怎么做表单验证的？

在el-form组件有个属性叫rule,他会接受一个对象,在el-form-item绑定一个prop属性,再在rule接受对象中进行规则编写就能做到表单验证的效果

8. vue如何进行组件通信？

父传子:使用v-bind语法糖绑定变量或者函数在子组件上,在子组件里通过defineProps来接收 子传父:使用v-on语法糖在子组件上绑定自定义事件,子组件通过emit将变量或者函数绑定在父组件传入的自定义事件中,父组件直接通过自定义函数中就可以拿到子组件传递的变量和函数

9. keep-alive是什么？怎么使用？

作用:缓存组件 使用:某些组件的复用性高，不希望反复创建就使用keep-alive组件包裹这个组件就行了

10. axios是怎么做封装的？

1.axios:创建axios实例对象,配置baseURL和timeOut 2.配置axios请求拦截器,一般是配置config.header(请求头)来携带token 3.配置axios响应拦截器,一般是对于不同状态码的处理,200状态码直接返回请求的数据,其他异常状态给出响应提示或进行相应跳转

11. vue路由时怎么传参的？

router.push({ path:"", query:{}(不会显示在url中),或者parms:{}(会显示在url中) })

12. 路由拦截是怎么实现的？

使用router的路由守卫

13. 说一下vue的动态路由。

通过登录的时候后端返回的该用户的路由列表,通过route.add添加路由列表,静态路由加后端返回的路由(动态路由)组成该用户的路由

14. vuex刷新数据会丢失吗？怎么解决？

会丢失 解决方法:引入 vuex持久化包,在vuex仓库中presist设置为true

15. computed和watch的区别？

computed是计算属性,watch是监听属性 computed可以被缓存,watch不能被缓存 computed支持异步,watch不支持异步

16. Pinia在什么场景会去使用？

登录状态储存

17. vue的双向数据绑定原理是什么？

vue2通过defineproperty的get和set方法,通过数据订阅和数据劫持的来实现 vue3用过proxy对象代理来实现双向绑定

18. 如何搭建脚手架？

安装node环境 命令行中使用npm create vite@lates

19. 如何封装一个组件？

首先封装该组件是为了后面复用,封装的组件在其他组件里直接引入就可以使用

20. vue的过滤器怎么使用？

过滤数据,可以对一些数据进行预处理

21. vue3和vue2有哪些区别？

vue3可以使用选项式api和组合式api,vue2只能使用选项式api vue3的双向绑定原理是proxy代理,vue2是使用defineproperty的get和set方法,通过数据订阅和数据劫持的来实现

22. 首屏优化该如何去做？

大图存CDN 小图转base64或者精灵图 减少不必要的请求 减少重复代码增加代码复用 合并请求

23. vue3的性能为什么比vue2好？

vue3的双向绑定原理比vue2 vue3的diff算法更优秀

24. vue3为什么使用proxy？

为了在开发阶段处理跨域问题# 前端面试题

1.css

1. 说一下CSS的盒模型。

页面是由一个个元素组成的，这些元素我们也可以称为盒子。 盒模型具体分为浏览器盒模型和ie盒模型 浏览器盒模型分为:margin、border、padding、content ie盒模型分为:margin、border、content(border、padding) 两者的区别在于content的不同，IE盒模型的content包括border、padding

2. CSS选择器的优先级？

ID选择器>类名选择器>标签选择器>全局选择器

3. 隐藏元素的方法有哪些？

• 调整透明度(opacity)

.element {
  opacity: 0;
}

• 控制元素的可见性(visibility)

.element {
  visibility: hidden;
}

• 控制元素不展示(display)

.element {
 display: none;
}

• 控制元素图层(z-index)

.element {
  z-index: 1;
}

• 使用定位将元素移出视口(position)

.element {
  position: absolute;
  left: -10000px;
}

4. px和rem的区别是什么？

px:固定长度单位，不随其它元素的变化而变化 em:相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化,通常设置font-size:62.5%,这样1rem=10px

5. 重绘重排有什么区别？

浏览器的重绘（repaint）和重排（reflow）是指浏览器对网页进行重新渲染的过程。 重排:重排会导致元素的尺寸、位置、内容等属性的变化，因此需要重新计算布局信息,是重新计算网页布局的过程。 重绘:元素的位置和尺寸等属性不变的情况下,重新绘制元素的样式,是根据新的布局信息重新绘制网页的过程。

6. 让一个元素水平垂直居中的方式有哪些？

• 使用margin

.element {
    margin: 0 auto
}

• flex弹性布局,将该元素的父元素设置上以下属性

.element {
  display: flex;
  align-items: center;
  justify-content: center;
}

• 使用定位(position)和移动(transform 父元素设置了position:relative)

.element {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%); //移动元素自己宽高的一半
}

7. CSS的哪些属性哪些可以继承？

以下是一些常见的CSS属性，它们可以继承：

• 字体属性（font）
• 文本属性（text）
• 颜色属性（color）
• 列表属性（list）
• 表格布局属性（table-layout）
• 元素可见性属性（visibility）

8. 有没有用过预处理器？

什么是css预处理器:CSS预处理器是一种用于增强和扩展CSS语言的工具。它们引入了变量、嵌套、函数、条件语句等编程概念，使得编写和维护CSS代码更加高效和可维护。预处理器会将编写的预处理器代码转换为标准的CSS代码，从而可以在浏览器中正常使用。 ⭐️目前最常用的css预处理有sass和less。

2.js

1. JS由哪三部分组成？

JavaScript由ECMScript、BOM和DOM组成。

• 核心语法(ECMAScript)

ECMAScript是一套标准，定义了一种语言的标准，规定了基本语法、数据类型、关键字、具体API的设计规范等，解析引擎设计的参考标准，但与具体实现无关，是JavaScript的核心。

• 浏览器对象模型（BOM）

BOM是一套操作浏览器功能的API，通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

• 文档对象模型（DOM）

DOM是一套操作页面元素的API，DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

2. 操作数组的方法有哪些？

常见操作数组的api:pop,push,shift,unshift,reverse,sort,splice,concat,slice,join,find,filter,some,reduce等 破坏型api:pop,push,shift,unshift,reverse,sort,splice

3. 说一下闭包，闭包有什么特点？

闭包:在一个函数的内部存在一个函数调用了外层函数的变量，这样就形成了闭包(一般会将内层函数return出去给外界使用，但是外界只能通过这个函数使用变量并不能改变变量)。

• 优点： 私有变量 避免全局变量的污染 变量长期驻扎在内存中，防止私有变量被垃圾回收机制回收
• 缺点： 闭包比普通函数占用更多的内存，会造成内存泄漏；在不使用时，要及时释放，将引用内层函数对象的变量赋值为null。

4. 事件委托是什么？

事件委托也称之为事件代理（Event Delegation）。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

5. 基本数据类型和引用数据类型的区别？

基本数据类型:Undefined,Null,Boolean,Number,String。 引用数据类型:Object,Arry 区别:基本数据类型直接将值存在栈中，而引用数据类型把值存在堆中，把地址存在栈中。

6. 说一下原型链。

1.原型:函数都有prototype属性,称之为原型，也称为原型对象 原型可以放一些属性和方法，共享给实例对象使用 原型可以做继承 2.原型链:对象都有__proto__ 属性,这个属性指向它的原型对象,原型对象 也是对象,也有 proto 属性,指向原型对象的原型对象,这样一层一层 形成的链式结构称为原型链，最顶层找不到则返回 null

7. new操作符具体做了什么？

(1) 创建一个新对象 (2) 将构造函数的作用域赋给新对象 (3) 执行构造函数中的代码 (4) 返回新对象

8. setTimeout最小执行时间是多少？

chrome 和 safari 中最小时间为1ms，而Firefox 65.0.1 和 IE 11是最小的延迟时间为0ms

9. ES6的新特性有哪些？

1.let和const 2.基本数据类型:symbol,引用数据类型:map 3.模板字符串 4.扩展运算符 5.箭头函数 6.定义类的语法糖(class) 7.promise和proxy

10. call,aply,bind三者有什么区别？

都是改变this指向和函数的调用，call和apply的功能类似，只是传参的方法不同 call方法传的是一个参数列表 apply传递的是一个数组 bind传参后不会立刻执行，会返回一个改变了this指向的函数，这个函数还是可以传参的，bind()() call方法的性能要比apply好一些，所以call用的更多一点

11. 如何实现一个深拷贝？

json序列化(JSON.parse(JSON.toString(Obj)))

12. 说一下事件循环。

Js的执行是单线程的，防止阻塞，将事件分为同步/异步 Js的同步代码会优先放在执行栈里面执行，异步代码则是存放在宿主环境中 异步代码在时机成熟后会进入任务队列中 执行栈中的代码执行完之后就会去任务队列查看是否有任务 执行栈拿到任务对列里的任务执行完之后又会去任务队列中去查找是否有任务，这样的反复去拿事件执行的过程叫做事件循环

13. get和post有什么区别？

1.get请求一般是去取获取数据（其实也可以提交，但常见的是获取数据） post请求一般是去提交数据。 2.get因为参数会放在url中，所以隐私性，安全性较差，请求的数据长度是有限制的，不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内 post请求是没有的长度限制，请求数据是放在body中； 3.get请求刷新服务器或者回退没有影响，post请求回退时会重新提交数据请求 4.get请求可以被缓存，post请求不会被缓存 5.get请求会被保存在浏览器历史记录当中，post不会。get请求可以被收藏为书签，因为参数就是url中，但post不能。它的参数不在url中 6.get请求只能进行url编码（appliacation-x-www-form-urlencoded）,post请求支持多种（multipart/form-data等）

14. promise和async await的区别是什么？

1.语法不通 2.错误处理不同 3.并发处理能力不同 Promise 并行执行多个异步操作 async/await 串行执行异步操作

15. 浏览器的存储方式有哪些？

浏览器常见的存储方式:sessionStroge,localStroge,cookie

16. token存在sessionstorage还是loaclstorage？

1.Cookie：将token存储在cookie中是一种常见的做法。这种方式的优点是，即使在浏览器关闭后，cookie仍然存在，因此用户可以保持登录状态。 2.SessionStorage：将token存储在sessionStorage中的优点是，它只在当前会话中存在，当用户关闭浏览器后，sessionStorage中的数据将被清除。这种方式的缺点是，如果用户在浏览器中打开新的标签页或窗口，那么新的页面将无法访问sessionStorage中的数据。 3.LocalStorage：将token存储在localStorage中的优点是，即使在浏览器关闭后，localStorage中的数据仍然存在，因此用户可以保持登录状态。此外，localStorage中的数据可以在同一浏览器的所有标签页和窗口中共享。

17. token的登录流程。

客户端使用用户名和密码请求登录,服务端收到请求,验证登录是否成功 验证成功后,服务端会返回一个Token给客户端,反之,返回身份验证失败的信息 客户端收到Token后把Token用一种方式存储起来,每次发起请求时都会将Token发给服务端 服务端收到请求后,验证Token的合法性,合法就返回客户端所需数据，反之，返回验证失败的信息

18. 防抖和节流是什么？

防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始计时。 节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数。

19. 解释一下什么是json？

JSON(JavaScript Object Notation):JS对象简谱 , 是一种轻量级的数据交换格式。

20. 精灵图和base64的区别是什么？

精灵图:网页处图图片的一种方式，它是把多张小图整合到一张。 base64:最常见的用于传输8Bit字节代码的编码方式之一，将原本二进制形式转成以64个字符基本单位，所组成的一串字符串。

3.vue

1. v-if和v-show的区别？

v-if:控制节点是否渲染 v-show:控制元素的dispaly属性 如果需要反复隐藏显示某个节点最好用v-show,v-if相交v-show更消耗性能

2. 如何理解MVVM的？

M(model 模型层):存储页面中的参数和方法 V(view 视图层):用于展示给用户的界面 VM(view-model 视图模型层):通过双向绑定来沟通M(model)和V(view),当视图中的数据更新时,模型层中的数据也会相应更新,反之模型层中的数据更新后视图层中的数据也会随之更新。

3. v-for中的key值的作用是什么？

确保遍历出的每一个元素的唯一性。 ⭐️确保每个key值唯一

4. 说一下你对vue生命周期的理解。

vue生命周期大致分为4个阶段:创建(creat),挂载(mount),更新(update),销毁(destroy) 细分可分为: beforCreat created beforMount mounted beforUpdate updated beforDestory destoried 如果使用了keep-alive这个组件则会多出deactive 和 actived

5. 在created和mounted去请求数据，有什么区别？

created只是初始化了数据但是没有挂载节点,而mounted节点已经挂载好了 在created中请求数据的请求和响应速度都比在mounted中请求快 若是想拿到挂载后的数据则需要在mounted中去请求数据

6. vue中的修饰符有哪些？

表单修饰符,事件修饰符,表格修饰符,鼠标修饰符,键盘修饰符,v-bind修饰符

7. elementui是怎么做表单验证的？

在el-form组件有个属性叫rule,他会接受一个对象,在el-form-item绑定一个prop属性,再在rule接受对象中进行规则编写就能做到表单验证的效果

8. vue如何进行组件通信？

父传子:使用v-bind语法糖绑定变量或者函数在子组件上,在子组件里通过defineProps来接收 子传父:使用v-on语法糖在子组件上绑定自定义事件,子组件通过emit将变量或者函数绑定在父组件传入的自定义事件中,父组件直接通过自定义函数中就可以拿到子组件传递的变量和函数

9. keep-alive是什么？怎么使用？

作用:缓存组件 使用:某些组件的复用性高，不希望反复创建就使用keep-alive组件包裹这个组件就行了

10. axios是怎么做封装的？

1.axios:创建axios实例对象,配置baseURL和timeOut 2.配置axios请求拦截器,一般是配置config.header(请求头)来携带token 3.配置axios响应拦截器,一般是对于不同状态码的处理,200状态码直接返回请求的数据,其他异常状态给出响应提示或进行相应跳转

11. vue路由时怎么传参的？

router.push({ path:"", query:{}(不会显示在url中),或者parms:{}(会显示在url中) })

12. 路由拦截是怎么实现的？

使用router的路由守卫

13. 说一下vue的动态路由。

通过登录的时候后端返回的该用户的路由列表,通过route.add添加路由列表,静态路由加后端返回的路由(动态路由)组成该用户的路由

14. vuex刷新数据会丢失吗？怎么解决？

会丢失 解决方法:引入 vuex持久化包,在vuex仓库中presist设置为true

15. computed和watch的区别？

computed是计算属性,watch是监听属性 computed可以被缓存,watch不能被缓存 computed支持异步,watch不支持异步

16. Pinia在什么场景会去使用？

登录状态储存

17. vue的双向数据绑定原理是什么？

vue2通过defineproperty的get和set方法,通过数据订阅和数据劫持的来实现 vue3用过proxy对象代理来实现双向绑定

18. 如何搭建脚手架？

安装node环境 命令行中使用npm create vite@lates

19. 如何封装一个组件？

首先封装该组件是为了后面复用,封装的组件在其他组件里直接引入就可以使用

20. vue的过滤器怎么使用？

过滤数据,可以对一些数据进行预处理

21. vue3和vue2有哪些区别？

vue3可以使用选项式api和组合式api,vue2只能使用选项式api vue3的双向绑定原理是proxy代理,vue2是使用defineproperty的get和set方法,通过数据订阅和数据劫持的来实现

22. 首屏优化该如何去做？

大图存CDN 小图转base64或者精灵图 减少不必要的请求 减少重复代码增加代码复用 合并请求

23. vue3的性能为什么比vue2好？

vue3的双向绑定原理比vue2 vue3的diff算法更优秀

24. vue3为什么使用proxy？

为了在开发阶段处理跨域问题