2022最新前端vue面试题

一.自我介绍

(我是谁 来自哪里,今天来的目的,面试的岗位是什么,几年的工作经验,掌握的技术栈有哪些,开发过什么项目,项目中负责的板块是什么)

二.项目功能提问

vue后台项目(这几个功能点要求都能用自己的话说出来)

1.路由守卫 / 导航守卫

token失效期，我们前端该如何处理。

2.权限路由/动态路由/鉴权

3.拦截器：请求拦截 响应拦截

响应拦截：当设置了响应拦截后所有的响应都会经过它，所以方便我们统一处理响应数据做相关的操作

4.增 删 改 查（增加数据项）

删：首先获取到要删除的这条数据唯一标识可能是ID 可能是code，然后通过后台提供的相关接口，把这个标识作为参数传递，当后台拿到后就会删除这个标识相对应的数据，然后将最新的数据响应给我们，之后再进行渲染

改：首先获取到要修改的这条数据唯一标识可能是ID 可能是code，然后前端进行数据改动，然后通过后台提供的相关接口，把数据作为参数传递，当后台拿到我的数据后往数据库中修改这个标识相对应的数据，然后将修改后的数据响应给我们，之后再进行渲染

5.axios的封装

三.移动端项目功能点(老师自行提问考察2-3个点)

四.小程序功能点(考察2-3个点)

五知识点提问:

1.vue常用指令有哪些?

2.computed和watch的区别是什么?

watch 多对一 只监听,不会产生新的函数名,watch也可以渲染数据,但是和computed比较就比较复杂

3.v-if 和 v-show的区别是什么? 什么时候使用v-if更好? 什么时候用v-show更好?

4.数组常用方法有哪些?

5.new操作具体干了什么?

1. 在堆空间中创建一个对象
2. this指向这个对象
3. 执行构造函数的语句
4. 返回这个对象

6.请以自己理解讲解js堆和栈，以及深拷贝怎么解决？（重点）

1. 使用lodash 插件
2. 使用递归解决深拷贝
3. 如果数据中没有函数,undefined 可以使用json.stringify+json.parse实现深拷贝

7.跨域引起的原因，以及开发时的解决方案?

8.vue的3种组件通信方式?（重点）

1 父子通信

2 子父通信

3 非父子通信(兄弟通信)

$eventBus

9.vue中key的唯一性的作用，以及异步加载组件的方式？

10.bfc区域的理解？

11.es6的新增特性

箭头函数,对象属性的简写,解构赋值,模板字符串,类(类的继承),扩展运算符,模块化(moudle),promise,Async / Await (ES7),let const 块级作用域

12.事件冒泡/捕获，以及事件委托。（重要）

13.cookie/localstorage/session区别（重要）

14.$nextTick用过吗，有什么作用？

15.vue-router路由的传参方式（重要）

第一种：使用router的name属性也就是params来传递参数

第二种：使用query来传递参数

第三种：使用vue里的标签来传递参数

第四种 : 动态路由传参

this.$router.push{(}^{\prime }./.{/}^{\prime }+id)取值页面this.$route.params.id

16.函数的防抖和节流。（重要）

17.讲解下浏览器的重绘和回流（重要）

18.js的内存泄露，以及vue中常注意的两种（重要）

1. 闭包
   ie9之前采用的引用计数算法
   
2. 意外的全局变量

19.请求怎么带token？（放入了哪里？每次请求前做了什么操作） （重要）

1, 获取本地存储中的 token,并放在请求拦截器中,这样所有的请求都可以直接通过请求拦截器将token传给服务器

20.git拿到项目地址时，到修改提交做的流程。

21.post和get的区别？

1. get 的参数会显示在地址栏,不安全. 可传的数据量小
2. post传的参数不会在地址栏显示,相对安全,可传的数据量大

22.element表格中，如果点击拿当前行的数据怎么写？

使用插槽的格式 v-slot={row} 就可以获取到当前行的数据

23.思考如果要修改上传完头像后怎么，去同步通知头部的头像更新，用到组件的哪个？

修改头像后,在header组件 created钩子中发送请求获取用户信息,

24.promise和async/await区别，简洁讲述？ （重要）

1. promise是ES6，async/await是ES7
2. async/await相对于promise来讲，写法更加优雅
3. reject状态：
   1）promise错误可以通过catch来捕捉，建议尾部捕获错误，2）async/await既可以用.then又可以用try-catch捕捉
   

25.get和post的区别 （重要）

1. GET在浏览器回退时是无害的,而POST会再次提交请求
2. GET请求会被浏览器主动cache,而POST不会,除非手动设置
3. GET请求只能进行url编码,而POST支持多种编码方式
4. GET请求参数会被完整保留在浏览器历史记录里,而POST的参数不会保留
5. GET请求在URL中传送的参数有长度限制,而POST没有
6. GET比POST更不安全,因为参数直接暴露在URl上,不能用来传递敏感信息.
7. GET参数通过URl传递,POST参数放在Request body中
8. 对于参数的数据类型,GET只接受ASCII字符,而POST没有限制
9. GET和POST本质上就是TCP链接，并无差别。但是由于HTTP的规定和浏览器/服务器的限制，导致他们在应用过程中体现出一些不同。

26.vue项目中你做的优化？（重要）

27.mvvm和mvc区别？它和其它框架jquery的区别

视图结构的概念区别，一个数据驱动一个事件操作，比如后者多为查找dom结构进行操作，前者为渲染时就绑定了methods方法，不用查找

28.vue页面之间的传参（重要）

29.ES6 Promise 用法，以及使用场景？

30.说说你们公司产品开发流程或web前端的开发流程？

产品确定迭代需求/设计进行设计稿设计/小组会议讨论实现可行性，以及后端前端发表意见/前端写页面，后端开发接口/调试接口/自测完成给测试人员测试/上线

31.vue的生命周期是什么?

32.插槽的作用以及使用方式？

33.vue的单项数据流?

答:数据从父级组件传递给子组件,子组件内部不能直接修改从父级传递过来的数据。这样防止子组件意外改变父组件的状态

34.vue中有没有用过组件通信方式 (必背)

35.v-on可以监听多个方法么? 要注意什么?(必背)

36.vue中ref的作用是什么?(必背)

37.ES6的新特性有哪些?(必背)

列举常用的ES6特性：

1. let、const
2. 箭头函数
3. 类的支持
4. 字符串模块
5. symbols
6. Promises
7. 数据解构
8. 展开运算符

38.什么是事件委托?(必背)

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

39.$route 和 $router 的区别?(必背)

40…什么是原型链?(必背)

41.什么是递归?(必背)

答: 函数内部自己调用自己, 这个函数就是递归函数 作用和循环效果一样，但很容易发生“栈溢出”错误，必须加退出条件return。

42.什么是闭包?(必背)

答: 函数嵌套函数，函数内部可以访问外部变量，外部不能直接访问该变量闭包保存了自己的私有变量，通过提供的接口给外部使用 延申了作用范围

43.改变this 指向的方式(必背)

44.JavaScript 有几种类型(必背)

45.组件中 data 为什么是一个函数？

46.new操作符具体干了什么呢?(必背)

1. 创建一个空对象
2. this指向这个对象
3. 给这个对象添加属性和方法
4. 返回这个对象

47.什么是同源(必背)

答: 同源就是两个页面有相同的协议 域名 端口 就属于同源 其中只要一个不同就不同源

48.promise如何使用 有什么作用(必背)

49.JS作用域和变量提升？(必背)

50.为什么构造函数的方法要放在prototype里边为什么不直接用this.的方式声明？(必背)

答:因为prototype占用一个存储空间,实例通过proto指针指向prototype，可以减少内存占用减少不必要的开销

51.函数的防抖和节流。(必背)