心血来潮，总结几个高频vue面试题，也是为了自己的方面总结。
vue面试题
1.浏览器存储Cookie、 LocalStorage与 SessionStorage?
cookie一般由服务器生成，也设置默认失效时间，如果在浏览器端生成，默认关闭页面或者游览器被清除。大小限制为4kb,每次都会携带在http头中，如果使用cookie保存过多数据，会带来性能问题。原生接口不友好，需要程序员自己封装。
localstorage 除非被清楚，否则永远保存，一般为5mb，在客户端和浏览器中保存，不参与服务器通信。原生接口可以接受，也可自己封装，对Objective-和array有更好的支持。
SessionStorage 在当前会话下有效，关闭页面或者游览器被清除，一般为5mb。在客户端和浏览器中保存，不参与服务器通信。原生接口可以接受，也可自己封装，对Objective-和array有更好的支持。
2.Vue2.x响应式数据原理(数据劫持)
vue 在初始化数据时，会对data进行遍历，并使用object.definepropoty把这些属性转化为setter getter。每个组件实例都会有一个watch实例。当页面使用对应属性时，首先会用getter进行依赖收集(收集当前组件的watcher)。如果属性发生变化setter 触发时会通知相关依赖进行更新操作(发布订阅)。
1. Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器原因。2. 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化
3.生命周期
beforeCreate：即将创建。此阶段为实例初始化之后，此时的数据观察和事件机制都未形
created：创建完毕。在这个阶段vue实例已经创建，我们在同样打印一下data和DOM元素。
beforemount：即将挂载。在上个阶段我们知道DOM还没生成，相关属性还是undefined，那么此阶段为即将挂载。
mounted:渲染完毕。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。
beforeUpdate:即将更新渲染。vue遵循数据驱动DOM的原则，当我们修vue实例的data时，vue会自动帮我们更新视图。
updated:更新渲染后。为了不使看到同-函数在不能阶段的效果，我注释掉beforeUpdate函数，添加update函数并绑定了刚才的click事beforeDestroy:销毁之前。到上一步vue已经成功的通过数据驱动DOM更新，当我们不在需要vue操纵DOM时，就需要销毁Vue，也就是清除vue实例与DOM的关联，调用destroy方法可以销毁当前组件。在销毁前，会触发
beforeDestroy钩 子函数。destroyed:销毁之后。在销毁后，会触发destroyed钩子函数。
4. Vue指令
v-model ：放在表单元素input、textarea、
select>option上的，实现双向数据绑定
v-text ： 展示对应的文本
v-once ： 对应的标签只渲染一次
v-show ： 是否能显示
v-html : 把值中的标签渲染出来
v-for : 循环显示元素
v-bind : 用于绑定行内属性 简写成:
v-if : 控制是否渲染该元素
v-cloak : 需要配合css使用：解决小胡子显示问题
v-pre : 跳过有这个指令的标签及其子元素的编译，按照原
生代码编译
5. 事件修饰符
.self只点元素本身时才触发事件
.stop阻止冒泡事件
.prevent阻止默认事件
.once对应函数只触发一次
.capture在捕获阶段触发二级绑定事件
.passive优先执行默认事件（滚动行为）
6. 表单修饰符
.number转化为数字，类似parse转化
.trim去字符串前后空格
7. directives自定义指令
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这
里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存
在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生
在其子 VNode 更新之前。指令的值可能发生了改变，也
可能没有。但是你可以通过比较更新前后的值来忽略不必
要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子
VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。
8. vue-router路由传参
提供了两种传参方式:
query传参（问号传参）： 路由映射表不用改动 :to=
{path:'',query:{}}或者:to={name:'',query:{}}
params传参（路径传参）： 在映射表中添加 /:变量 的
形式； :to={name:'',params:{变量:''}}}
9. 接口请求一般放在哪个生命周期中？
接口请求一般放在mounted中，但需要注意的是服务端渲染
时不支持mounted，需要放到created中。
10. Computed和Watch区别
Computed本质是一个具备缓存的watcher，依赖的属性发生变化就会更新视图。 适用于计算比较消耗性能的计算场景。当表达式过于复杂时，在模板中放入过多逻辑会让模板难以维护，可以将复杂的逻辑放入计算属性中处理。Watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听，如果没有写到组件中，不要忘记使用unWatch手动注销哦
11. v-if和v-show的区别
当条件不成立时，v-if不会渲染DOM元素，v-show操作的是样式(display)，切换当前DOM的显示和隐藏。
12. 组件中的data为什么是一个函数？
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
1. 3路由的两种实现原理
Hash模式: window对象提供了onhashchange事件来监听hash值的改变,一旦url中的hash值发生改变,便会触发该事件。
History 模式: popstate监听历史栈信息变化,变化时重新渲染; 使用pushState方法实现添加功能; 使用eplaceState实现替换功能
14. keep-alive作用
keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。 常用的两个属性include/exclude，允许组件有条件的进行缓存。 两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。 keep-alive的中还运用了LRU(Least Recently Used)算法。
15. Vue2.x组件通信有哪些方式
父子组件通信: props 、$on、$emit、 Ref 获取实例的方式调用组件的属性或者方法、（Provide、inject 官方不推荐使用，但是写组件库时很常用）
兄弟组件通信: EventBus 、Vuex跨级组件通信：Vuex、$attrs$listenersProvidProvideinject官方不推荐使用，但是写组件库时很常用）
18. Vuex
概念: Vuex 是一个专为 Vue应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。