Vue 面试题（可供参考）

目前，在前端面试中，有大多数几乎每一个面试官都会问到 “Vue” 这个主流框架，那么小编就来问一下，关于Vue，你们到底知多少呢？

                                                                                                         

今天，小编总结了一些关于Vue的面试题，希望对大家能有所帮助！  

1.先介绍下Vue的 ‘响应式系统’

Vue为MVVM框架，当数据模型data变化时，页面视图会得到响应更新，其原理对data的getter / setter方法进行拦截（Object.defineProperty-Vue2.0   Proxy-Vue3.0 ），利用发布订阅的设计模式，在getter方法中进行订阅，在setter方法中发布通知，让所有订阅者完成响应。

在响应式系统中，Vue会为数据模型data的每一个属性新建一个订阅中心作为发布者，而监听器watch，计算属性computed，视图渲染template / render 三个角色同时作为订阅者，对于监听器watch，会直接订阅观察监听的属性，对于计算属性computed 和视图渲染 template / render，如果内部执行获取了data的某个属性，就会执行该属性的getter方法，然后自动完成对该属性的订阅，当属性被修改时，就会执行该属性的setter方法，从而完成该属性的发布通知，通知所有订阅者进行更新。

 2.computed 与 wtch 的区别

计算属性computed 和监听器 watch 都可以观察属性的变化从而做出响应，不同的是：

计算属性computed 更多是作为缓存功能的观察者，它可以将一个或者多个data的属性进行复杂的计算生成一个新的值，提供给渲染函数使用，当依赖的属性变化时，computed 不会立即重新计算生成新的值，而是先标记为脏数据，当下次computed 被获取时候，才会进行重新计算并返回。

而监听器watch并不具备缓存性，监听器watch提供一个监听函数，当监听的属性发生变化时，会立即执行该函数。

3.介绍一下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：发生在实例销毁之前，在当前阶段，实例完全可以被使用，我们可以在此处进行善后收尾工作，eg：清除定时器。

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

PS：图示如下：

4.为什么组件的 data 必须是一个 ‘函数’，而不是对象 

一个组件可能在很多地方使用，也就是会创建很多个实例，如果data是一个对象的话，对象是引用类型，一个实例修改了data会影响到其他实例，所以data必须使用函数，为每一个实例创建一个属于自己的data，使其同一个组件的不同实例互不影响。

5.SSR 有了解吗？原理是什么？ 

在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，并且在服务器内部将 Vue 组件渲染成 HTML ，并且将数据，HTML 一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程，称之为 “ 服务器端渲染SSR ”。

而当客户端拿到服务器渲染的HTML和数据之后，由于数据已经有了，客户端不需要再一次请求数据，而只需要将数据同步到组件或者Vuex内部即可。除了数据以外，HTML结构也已经有了，客户端在渲染组件的时候，也只需要将HTML的DOM节点映射到Virtual DOM即可，不需要重新创建DOM节点，这个将数据和HTML同步的过程，又叫做客户端激活。

使用SSR的好处：

1. 有利于SEO：其实就是有利于爬虫来爬你的页面，因为部分页面爬虫是不支持执行JavaScript的，这种不支持执行JavaScript的爬虫抓取到的非SSR的页面会是一个空的HTML页面，而有了SSR以后，这些爬虫就可以获取到完整的HTML结构的数据，进而收录到搜索引擎中。
2. 白屏时间更短：相对于客户端渲染，服务器端渲染在浏览器请求URL之后已经得到了一个带有数据的HTML文本，浏览器只需要解析HTML，直接构建 DOM 树就可以。而客户端渲染，需要先得到一个空的HTML页面，这个时候页面已经进入白屏，之后还需要经过加载并执行JavaScrip，请求后端服务器获取数据，JavaScript渲染页面几个过程才可以看到最后的页面。特别是在复杂应用中，由于需要加载JavaScript脚本就越多，越大，这会导致应用的首屏加载时间非常长，进而降低了用户体验感。

 6.组件与组件之间 ‘ 通信 ’  and so on