vue面试题，快来看一看吧！！

1：说说你对 SPA 单页面的理解？
SPA：全称（single-page application)

 概念：仅在Web页面初始化时加载相对应的代码。一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转。利用的是路由机制实现代码的变换，避免页面的重新加载

优点：
   • 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲 染；
   • 基于上面一点，SPA 相对对服务器压力小；
   • 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；
缺点：
   • 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将         CSS JavaScript、 统一加载，部分页面按需加载；
   • 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前            进后退功能，所有的页面切换需要自己建立堆栈管理；
   • SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然 的弱势。

2：请问 v-if 和 v-show 有什么区别？

1.共同点

都是动态显示和隐藏DOM元素

2.区别：

（1）手段：

v-if是动态的向DOM树内添加或者删除DOM元素；

v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

（3）编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

（5）使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

3：vue中 key 值的作用？

key的作用是为了更高效的对比虚拟DOM中每个节点是否是相同节点

使用key来给每个节点做一个唯一标识

key的主要作用是为了高效的更新虚拟DOM，另外vue中在使用相同标签名元素过渡切换时，也会使用到key属性，目的也是为了vue可以区分他们，否则vue只会替换其内部属性，而不会触发过渡效果

4：说⼀下vue常⽤基本指令有哪些？

v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。 v-show：根据表达式之真假值，切换元素的
display CSS 属性。

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。

v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

v-on：用于监听指定元素的DOM事件，比如点击事件。绑定事件监听器。

v-model：实现表单输入和应用状态之间的双向绑定

v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有 指令的节点会加快编译。

v-once：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容 并跳过。这可以用于优化更新性能。

5.：说⼀下vue开发环境和线上环境如何切换 ？

主 要 通 过 检 测 process.env.NODE_ENV===”production” 和
process.env.NODE_ENV===”development”环境，来设置线上和线下环境地址，从而实现线上和线 下环境地址的切换

6.：说⼀下vue双向数据绑定的原理？

核心主要利用ES5中的Object.defineProperty实现的，然后利用里面的getter和setter来
实现双向数据绑定的，大致就这些，其实要实现起来比这个要复杂一些，不过我大致了解过。

7：vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract，

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的
API，路由会自动强制进入这个模式.

8：Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:
Proxy 可以直接监听对象而非属性； Proxy 可以直接监听数组的变化； Proxy 有多达 13 种拦截方法,不限于
apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的； Proxy
返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改； Proxy
作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利； Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue
的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。