VUE面试题总结

Posted 2021-04-16 BUG集锦

面试题总结

在前端面试时常见的面试题总结。

"关于ES6的"

一、关于ES6语法
1、字符串、数组、对象扩展的api。
2、变量扩展：let、const解构赋值，块级作用域。
3、函数扩展：箭头函数默认参数、rest参数。
4、展开运算符、模板字符串。
5、set和map数据结构。
6、迭代器和生成器函数next和yield的理解。
7、proxy对象属性代理器：属性的读取（get）和设置（set）相关操作。
8、promise对象、异步编程的解决方案。
9、async + await：异步编程的终极方案promise + generator的语法糖。
10、class语法、构造函数的语法糖。
11、模块化编程export + import的导出和导入。

 VUE框架

1、vue-router：搭建SPA
路由、组件的配置。
路由间的传值。
路由跳转。
路由的导航守卫。
记住在router.js和组件页面中的使用方式。
2、vuex：状态管理、数据仓库store
实例化仓库的5大属性的使用。
state、getters、mutations、actions、modules。
辅助函数mapState等，仓库中计算属性的映射、方便操作。
记住在store.js和组件中使用方式。

3、说一下 Vue 的双向绑定数据的原理
vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、 getter，在数据变动时发布消息给订阅者，触发相应监听回调。

4、 解释单向数据流和双向数据绑定
单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使 UI 发生变更就必须创建各种 action 来维护对应的 state。
双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度。

5、组件通信
父组件向子组件通信
子组件通过 props 属性，绑定父组件数据，实现双方通信。
子组件向父组件通信
将父组件的事件在子组件中通过 $emit 触发。
非父子组件、兄弟组件之间的数据传递

6、NextTick 是做什么的
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

7、计算属性 computed 和事件 methods 有什么区别我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。

不同点：computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值。method：只要发生重新渲染， method 调用总会执行该函数。

8、Vue 等单页面应用的优缺点
优点
良好的交互体验
良好的前后端工作分离模式
减轻服务器压力
缺点
SEO 难度较高
前进、后退管理
初次加载耗时多

9、Vue 组件 data 为什么必须是函数
      因为 JS 本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有 Vue 实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了。

10、$route 和 $router 的区别
$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法。
$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等

11、谈谈你对MVVM开发模式的理解

MVVM分为Model、View、ViewModel三者。

Model：代表数据模型，数据和业务逻辑都在Model层中定义；
View：代表UI视图，负责数据的展示；
ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作；
Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

12、前端如何优化网站性能？

1、减少 HTTP 请求数量
在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。

CSS Sprites

国内俗称CSS精灵，这是将多张图片合并成一张图片达到减少HTTP请求的一种解决方案，可以通过CSS的background属性来访问图片内容。这种方案同时还可以减少图片总字节数。

合并 CSS 和 JS 文件

现在前端有很多工程化打包工具，如：grunt、gulp、webpack等。为了减少 HTTP 请求数量，可以通过这些工具再发布前将多个CSS或者多个JS合并成一个文件。

采用 lazyLoad

俗称懒加载，可以控制网页上的内容在一开始无需加载，不需要发请求，等到用户操作真正需要的时候立即加载出内容。这样就控制了网页资源一次性请求数量。

2、控制资源文件加载优先级

浏览器在加载html内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

一般情况下都是CSS在头部，JS在底部。

3、利用浏览器缓存

浏览器缓存是将网络资源存储在本地，等待下次请求该资源时，如果资源已经存在就不需要到服务器重新请求该资源，直接在本地读取该资源。

4、减少重排（Reflow）

基本原理：重排是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证 DOM 树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如果Reflow的过于频繁，CPU使用率就会急剧上升。

减少Reflow，如果需要在DOM操作时添加样式，尽量使用 增加class属性，而不是通过style操作样式。

5、减少 DOM 操作

6、图标使用 IconFont 替换