「面试题」20+Vue面试题整理

「观感度：🌟🌟🌟🌟🌟」html

「口味：红烧猪蹄」前端

「烹饪时间：15min」vue

本文已收录在Github github.com/Geekhyt，欢迎Star。node

从镜片的厚度和黄黑相见的格子衬衫我察觉到，面前坐着的这位面试官应该是来者不善。我像以往同样，准备花3分钟的时间进行自我介绍。在此期间，为了不尴尬，我盯着面试官的眉毛中间，不过面试官明显对个人经历不是很感兴趣。他在1分半的时候打断了我。react

❝
你以为本身最擅长的技术栈是什么？git
❞

Vue吧，我很喜欢尤大，最近刚发布了Vue的首部纪录片，真的很好看。github

0.那你能讲一讲MVVM吗？

MVVM是Model-View-ViewModel缩写，也就是把MVC中的Controller演变成ViewModel。Model层表明数据模型，View表明UI组件，ViewModel是View和Model层的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据。面试

1.简单说一下Vue2.x响应式数据原理

Vue在初始化数据时，会使用Object.defineProperty从新定义data中的全部属性，当页面使用对应属性时，首先会进行依赖收集(收集当前组件的watcher)若是属性发生变化会通知相关依赖进行更新操做(发布订阅)。正则表达式

2.那你知道Vue3.x响应式数据原理吗？

(还好我有看，这个难不倒我)算法

Vue3.x改用Proxy替代Object.defineProperty。由于Proxy能够直接监听对象和数组的变化，而且有多达13种拦截方法。而且做为新标准将受到浏览器厂商重点持续的性能优化。

❝
Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？
❞

（很简单啊）

判断当前Reflect.get的返回值是否为Object，若是是则再经过reactive方法作代理，这样就实现了深度观测。

❝
监测数组的时候可能触发屡次get/set，那么如何防止触发屡次呢？
❞

咱们能够判断key是否为当前被代理对象target自身属性，也能够判断旧值与新值是否相等，只有知足以上两个条件之一时，才有可能执行trigger。

面试官抬起了头。内心暗想

(这小子还行，比上两个强，应该是多多少少看过Vue3的源码了)

3.再说一下vue2.x中如何监测数组变化

使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了本身定义的数组原型方法。这样当调用数组api时，能够通知依赖更新。若是数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

（能问到这的面试官都比较注重深度，这些常规操做要记牢）

（原型链的细节能够参考个人另外一篇专栏）

一文带你完全搞懂JavaScript原型链

4.nextTick知道吗，实现原理是什么？

在下次 DOM 更新循环结束以后执行延迟回调。nextTick主要使用了宏任务和微任务。根据执行环境分别尝试采用

Promise
MutationObserver
setImmediate
若是以上都不行则采用setTimeout

定义了一个异步方法，屡次调用nextTick会将方法存入队列中，经过这个异步方法清空当前队列。

（关于宏任务和微任务以及事件循环能够参考个人另两篇专栏）

(看到这你就会发现，其实问框架最终仍是考验你的原生JavaScript功底)

浏览器中JavaScript的事件循环

Node.js事件循环

5.说一下Vue的生命周期

beforeCreate是new Vue()以后触发的第一个钩子，在当前阶段data、methods、computed以及watch上的数据和方法都不能被访问。

created在实例建立完成后发生，当前阶段已经完成了数据观测，也就是可使用数据，更改数据，在这里更改数据不会触发updated函数。能够作一些初始数据的获取，在当前阶段没法与Dom进行交互，若是非要想，能够经过vm.$nextTick来访问Dom。

beforeMount发生在挂载以前，在这以前template模板已导入渲染函数编译。而当前阶段虚拟Dom已经建立完成，即将开始渲染。在此时也能够对数据进行更改，不会触发updated。

mounted在挂载完成后发生，在当前阶段，真实的Dom挂载完毕，数据完成双向绑定，能够访问到Dom节点，使用$refs属性对Dom进行操做。

beforeUpdate发生在更新以前，也就是响应式数据发生更新，虚拟dom从新渲染以前被触发，你能够在当前阶段进行更改数据，不会形成重渲染。

updated发生在更新完成以后，当前阶段组件Dom已完成更新。要注意的是避免在此期间更改数据，由于这可能会致使无限循环的更新。

beforeDestroy发生在实例销毁以前，在当前阶段实例彻底能够被使用，咱们能够在这时进行善后收尾工做，好比清除计时器。

destroyed发生在实例销毁以后，这个时候只剩下了dom空壳。组件已被拆解，数据绑定被卸除，监听被移出，子实例也通通被销毁。

(关于Vue的生命周期详解感兴趣的也请移步个人另外一篇专栏)

从源码解读Vue生命周期，让面试官对你另眼相看

6.你的接口请求通常放在哪一个生命周期中？

接口请求通常放在mounted中，但须要注意的是服务端渲染时不支持mounted，须要放到created中。

7.再说一下Computed和Watch

Computed本质是一个具有缓存的watcher，依赖的属性发生变化就会更新视图。适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，能够将复杂的逻辑放入计算属性中处理。

Watch没有缓存性，更多的是观察的做用，能够监听某些数据执行回调。当咱们须要深度监听对象中的属性时，能够打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可使用字符串形式监听，若是没有写到组件中，不要忘记使用unWatch手动注销哦。

8.说一下v-if和v-show的区别

当条件不成立时，v-if不会渲染DOM元素，v-show操做的是样式(display)，切换当前DOM的显示和隐藏。

9.组件中的data为何是一个函数？

一个组件被复用屡次的话，也就会建立多个实例。本质上，这些实例用的都是同一个构造函数。若是data是对象的话，对象属于引用类型，会影响到全部的实例。因此为了保证组件不一样的实例之间data不冲突，data必须是一个函数。

10.说一下v-model的原理

v-model本质就是一个语法糖，能够当作是value + input方法的语法糖。能够经过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不一样生成不一样的事件和属性。

11.Vue事件绑定原理说一下

原生事件绑定是经过addEventListener绑定给真实元素的，组件事件绑定是经过Vue自定义的$on实现的。

❝
面试官：(这小子基础还能够，接下来我得上上难度了)
❞

12.Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历如下阶段：

生成AST树
优化
codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并非全部的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)咱们就能够跳过对它们的比对，对运行时的模板起到很大的优化做用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

❝
面试官：(精神小伙啊，有点东西，难度提高，不信难不倒你)
❞

13.Vue2.x和Vue3.x渲染器的diff算法分别说一下

简单来讲，diff算法有如下过程

同级比较，再比较子节点
先判断一方有子节点一方没有子节点的状况(若是新的children没有子节点，将旧的子节点移除)
比较都有子节点的状况(核心diff)
递归比较子节点

正常Diff两个树的时间复杂度是O(n^3)，但实际状况下咱们不多会进行跨层级的移动DOM，因此Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才须要用核心的Diff算法进行同层级比较。

Vue2的核心Diff算法采用了双端比较的算法，同时重新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操做。相比React的Diff算法，一样状况下能够减小移动节点次数，减小没必要要的性能损耗，更加的优雅。

Vue3.x借鉴了 ivi算法和 inferno算法

在建立VNode时就肯定其类型，以及在mount/patch的过程当中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提高。(实际的实现能够结合Vue3.x源码看。)

该算法中还运用了动态规划的思想求解最长递归子序列。

(看到这你还会发现，框架内无处不蕴藏着数据结构和算法的魅力)

❝
面试官：(能够能够，看来是个苗子，不过自我介绍属实有些无聊，下一题)
❞

(基操，勿6)

14.再说一下虚拟Dom以及key属性的做用

因为在浏览器中操做DOM是很昂贵的。频繁的操做DOM，会产生必定的性能问题。这就是虚拟Dom的产生缘由。

Vue2的Virtual DOM借鉴了开源库snabbdom的实现。

Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象。(也就是源码中的VNode类，它定义在src/core/vdom/vnode.js中。)

VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段。

「key的做用是尽量的复用 DOM 元素。」

新旧 children 中的节点只有顺序是不一样的时候，最佳的操做应该是经过移动元素的位置来达到更新的目的。

须要在新旧 children 的节点中保存映射关系，以便可以在旧 children 的节点中找到可复用的节点。key也就是children中节点的惟一标识。

15.keep-alive了解吗

keep-alive能够实现组件缓存，当组件切换时不会对当前组件进行卸载。

经常使用的两个属性include/exclude，容许组件有条件的进行缓存。

两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。

keep-alive的中还运用了LRU(Least Recently Used)算法。

（又是数据结构与算法，原来算法在前端也有这么多的应用）

16.Vue中组件生命周期调用顺序说一下

组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。

组件的销毁操做是先父后子，销毁完成的顺序是先子后父。

加载渲染过程

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted

子组件更新过程

父beforeUpdate->子beforeUpdate->子updated->父updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

17.Vue2.x组件通讯有哪些方式？

父子组件通讯

父->子props，子->父 $on、$emit

获取父子组件实例 $parent、$children

Ref 获取实例的方式调用组件的属性或者方法

Provide、inject 官方不推荐使用，可是写组件库时很经常使用
兄弟组件通讯

Event Bus 实现跨组件通讯 Vue.prototype.$bus = new Vue

Vuex
跨级组件通讯

Vuex

$attrs、$listeners

Provide、inject

18.SSR了解吗？

SSR也就是服务端渲染，也就是将Vue在客户端把标签渲染成HTML的工做放在服务端完成，而后再把html直接返回给客户端。

SSR有着更好的SEO、而且首屏加载速度更快等优势。不过它也有一些缺点，好比咱们的开发条件会受到限制，服务器端渲染只支持beforeCreate和created两个钩子，当咱们须要一些外部扩展库时须要特殊处理，服务端渲染应用程序也须要处于Node.js的运行环境。还有就是服务器会有更大的负载需求。

19.你都作过哪些Vue的性能优化？

编码阶段

尽可能减小data中的数据，data中的数据都会增长getter和setter，会收集对应的watcher
v-if和v-for不能连用
若是须要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的状况下，使用v-if替代v-show
key保证惟一
使用路由懒加载、异步组件
防抖、节流
第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载

SEO优化

预渲染
服务端渲染SSR

打包优化

压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化

用户体验

骨架屏
PWA

还可使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等。

(优化是个大工程，会涉及不少方面，这里申请另开一个专栏)

20.hash路由和history路由实现原理说一下

location.hash的值实际就是URL中#后面的东西。

history实际采用了HTML5中提供的API来实现，主要有history.pushState()和history.replaceState()。

面试官拿起旁边已经凉透的咖啡，喝了一口。

(我难道问不倒这小子了么)

「持续更新……」

❤️爱心三连击

1.看到这里了就点个赞支持下吧，你的「赞」是我创做的动力。

2.关注公众号前端食堂，「你的前端食堂，记得按时吃饭」！

3. github.com/Geekhyt，感谢Star。