2022年面试小技巧，vue常见的面试题汇总，需要的抓紧收藏起来

1.vue在created和mounted这两个生命周期中请求数据有什么区别呢？

若涉及页面加载，在created的时候，视图中的html并没有渲染出来，所以这个时候如果直接去操作dom节点，一定找不到相关元素。

而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点。

2.watch和计算属性有什么区别？

如果一个数据需要经过复杂计算就用 computed

如果一个数据需要被监听并且对数据做一些操作就用 watch

计算属性（computed）

属性检测（watch）

首次运行

首次不运行

为了应对复杂的逻辑计算 对数据的变化作出反应

只有当缓存改变时才执行 只要从新渲染就会执行

有缓存 没有缓存

3.删除数组用delete和vue.delete有什么区别？

• delete：只是删除数组成员变为empty/undefined，其他元素键值不变
• vue.delete：直接删除了数组成员，并改变了数组的键值

4.vue项目实现路由按需加载（路由懒加载）的3中方式

• vue异步组件
• 路由懒加载(使用import)
• webpack提供的require.ensure()

5.vue项目前端性能优化

• 路由懒加载（当路由被访问时才加载对应组件）
• 打包优化（不生成.map文件）
• 切换多入口模式
• 使用字体图标代替切图
• 使用雪碧图（见多张图片合并到一张图片中）
• 提取公共样式和方法
• 控件销毁
• 路由离开时及时销毁路由离开时及时解绑事件
• 使用keep-alive
• 合理利用vue的生命周期（减少在created中做ajax请求，而是放在mounted中，以不堵塞页面生成dom）

6.vuex是什么？如何使用？在哪种功能场景中使用？

vuex是一个专为vue.js应用程序开发的状态管理模式

为了使用vuex，要引入store，并注入vue.js组件中，在组件内部即可通过$ostore访问store对象

在单页面应用中，用于组件之间的通信，例如音乐播放、登录状态管理、加入购物车等

7.dom是什么？谈谈你的理解

文档对象模型（document object model)，是w3c组织推荐的处理可扩展标志性语言的标准编程接口，用来表示文档中对象的标准模型。

8.如何实现跨域?

• jsonp：通过动态创建script，再请求一个带参网址实现跨域通信
• document.domain + iframe跨域：两个页面都通过js强制设置document.domain为基础主域，就实现了同域
• location.hash + iframe跨域：a与b欲实现跨域，通过中间页c来实现。三个页面，不同域之间利用的location.hash传值，相同域之间直接js访问来通信
• window.name + iframe跨域：通过iframe的src属性，由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域
• postMessage跨域：可以跨域操作的window属性之一
• CORS：服务端设置Access-Control-Allow-Origin即可，前端无需设置，若要带cookie请求，前后端都要设置
• 代理跨域：起一个代理服务器，实现数据的转发

9.jsonp的缺点

json只支持get，因为script标签只能使用get请求；jsonp需要后端配合返回指定格式的数据

10.简单口述数组去重的方法

• indexof循环去重
• ES6 Set去重，Array.from(new Set(array))
• obj键值对去重，把数组的值存成obj的key值，若有重复，则去掉

11.js的基本数据类型

js中有五种基本数据类型，分别是undefined、null、boolean、number、string

object属于引用数据

12.js的几种继承方式

• 使用对象冒充实现继承
• 采用call、apply方式改变函数上下文实现继承
• 原型链方式继承

13.说说你对作用域链的理解

作用域链的作用是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即将被终止，作用域链向下访问的变量是不被允许的

14.谈谈你对webpack的理解

webpack是把项目当作一个整体，通过一个给定的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

15.（单页面）SPA首屏加载慢如何解决？

• 尽可能地缩小webpack或者其他打包工具生成的包的大小
• 使用服务端渲染的方式
• 使用预渲染的方式
• 使用gzip减小网络传输的流量大小
• 使用页面或组件分块懒加载
• 代理缓存
• 使用CDN
• 压缩组件

16.单页面应用和多页面应用区别及优缺点

单页面应用（SPA）：指只有一个主页面应用，所有页面内容都包含在这个页面中，在交互时仅刷新局部资源

多页面应用（MPA）：就是指一个应用中有多个页面，页面跳转时是整页刷新

单页面的优点：

• 用户体验好，快，内容的改变不需要重新加载整个页面
• 前后端分离

缺点：

• 导航不可用，如果一定要导航需要自行实现前进、后退
• 不利于seo

• 初次加载耗时长
• 页面复杂度提高

多页面的优点：seo效果好

多页面的缺点：页面切换慢，每次切换页面需要选择性地重新加载公共资源

（seo一般指搜索引擎优化）

17.二叉树的四种遍历方式

前序遍历：先访问根节点，然后前序遍历左子树，再前序遍历右子树

中序遍历：中序遍历根节点左子树，然后是访问根节点，最后遍历右子树

后序遍历：从左到右先叶子后节点的方式遍历访问左右子树，最后访问根节点

层序遍历：从根节点从上往下逐层遍历，在同一层，按从左到右的顺序对结点逐个访问

18.对前端模块化的认识

前端模块化指的是：

1.将一个复杂的程序依次依照一定的规则封装成几个块，并进行组合在一起

2.块的内部数据与实现是私有的，只是向外部暴露一些接口或方法与外部其他模块通信（或者可以说是把常用的工具函数和 一些ui组件封装，再后续开发过程中可以方便进行调用）

19.什么是内存泄漏？js哪些操作会造成内存泄露

内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。

• 意外的全局变量引起的内存泄露
• 闭包引起的内存泄露
• 没有清理的DOM元素引用
• 被遗忘的定时器或者回调
• 子元素存在引起的内存泄露

20.display：none和visibility：hidden的区别

display：none是彻底消失，不会在文档流中占位，浏览器也不会解析该元素。visibility：hidden在文档流中仍占位，浏览器会解析该元素

21.长列表加载优化

• 采用分页
• 计算可视化的数据列表，滑动时渲染该列表

22.什么是前端工程化？前端工程化的优点是什么？如何做"前端工程化"？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化。

其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间

主要应该从模块化、组件化、规范化、自动化四个方面思考：

模块化：将一个大文件拆分成相互依赖的小文件，再进行统一的拼装和加载。

组件化：每个包含模板(HTML)+样式(CSS)+逻辑(JS)功能完备的结构单元封装成组件

规范化：

• 目录结构的制定
• 编码规范
• 前后端接口规范
• 文档规范
• 组件管理
• Git分支管理
• Commit描述规范
• 定期CodeReview
• 视觉图标规范

自动化：

• 图标合并
• 持续集成
• 自动化构建
• 自动化部署
• 自动化测试