前言
接上篇前端Js笔试题面试题，收集整理Vue相关的面试题，供自己现在和以后学习和面试，也希望能对点进来的小伙伴有所帮助。
目录：
前端HTML+CSS笔试题面试题
前端JS笔试题面试题
前端小程序笔试题面试题
Vue基础必备
1、v-show 与v-if区别
1、v-show是css切换，v-if是完整的销毁和重新创建。
2、使用 频繁切换时用v-show，运行时较少改变时用v-if
3、v-if=‘false’ v-if是条件渲染，当false的时候不会渲染
2、Class 与 Style 如何动态绑定？
Class
1、对象方法 v-bind:class="{'orange': isRipe, 'green': isNotRipe}"
2、数组方法 v-bind:class="[class1, class2]"
3、行内 v-bind:style="{color: color, fontSize: fontSize+'px'}"
Stlye
1、对象方法 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2、数组方法 v-bind:style="[styleColor,styleSize]"
3、计算属性和 watch 的区别
computed： 是计算属性，依赖其它属性值，并且 computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会重新计算computed 的值；
watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
运用场景：
1、当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed的缓存特性，避免每次获取值时，都要重新计算；
2、当我们需要在数据变化时执行异步或开销较大的操作时，应该使用watch，使用watch选项允许我们执行异步操作 ( 访问一个API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。
4、事件修饰符
.prevent: 提交时间不再重载页面
.stop:阻止单击事件冒泡
.self:当事件发生在该元素本身而不是子元素的时候触发
.capture:事件侦听，事件发生的时候会调用
组合键 click.ctrl.exact 只有ctrl被按下的时候才触发
5、组件中data为什么是函数
因为组件是用来复用的，JS 里对象是引用关系，这样作用域没有隔离，而new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。
6、开发中常用的指令有哪些
v-model :一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html:更新元素的 innerHTML
v-show与v-if: 条件渲染,
v-on : click: 可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数
v-for:基于源数据多次渲染元素或模板块
v-bind: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
7、v-model 的原理
vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖， v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：
1、text 和 textarea元素使用 value 属性和 input事件；
2、checkbox 和 radio 使用 checked 属性和 change 事件；
3、select字段将value 作为 prop 并将 change 作为事件;
8、vue插槽
单个插槽
当子组件模板只有一个没有属性的插槽时，父组件传入的整个内容片段将插入到插槽所在的 DOM 位置，并替换掉插槽标签本身
命名插槽
solt元素可以用一个特殊的特性name来进一步配置如何分发内容。多个插槽可以有不同的名字。 这样可以将父组件模板中slot位置，和子组件 slot元素产生关联，便于插槽内容对应传递
作用域插槽
可以访问组件内部数据的可复用插槽(reusable slot)在父级中，具有特殊特性 slot-scope 的 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的prop 对象
9、组件之间的传值通信
1、父组件给子组件传值
使用
props，父组件可以使用props向子组件传递数据
2、子组件向父组件通信
父组件向子组件传递事件方法，子组件通过
$emit触发事件，回调给父组件
3、非父子，兄弟组件之间通信
可以通过实例一个
vue实例Bus作为媒介，要相互通信的兄弟组件之中，都引入Bus，然后通过分别调用Bus事件触发($emit)和监听($on)来实现通信和参数传递
10、对keep-alive的了解
keep-alive是一个内置组件，可使被包含的组件保留状态或避免重新渲染，有include（包含的组件缓存）和exclude（排除的组件不缓存）两个属性。
对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。
11、 Vue computed 实现
1、建立与其他属性（如：data、 Store）的联系；
2、属性改变后，通知计算属性重新计算
Vue生命周期
12、请详细说下你对vue生命周期的理解
生命周期共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后
创建前后 beforeCreate/created
在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象有了，el还没有。
载入前后 beforeMount/mounted
在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前未虚拟的DOM节点，data尚未替换。在mounted阶段，vue实例挂载完成，data成功渲染。
更新前后beforeUpdate/updated
当data变化时，会触发beforeUpdate和updated方法。这两个不常用，不推荐使用。
销毁前后beforeDestory/destoryed
beforeDestory是在vue实例销毁前触发，一般在这里要通过removeEventListener解除手动绑定的事件。实例销毁后，触发的destroyed。
生命周期的作用？
生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑。
13、请列举出3个Vue中常用的生命周期钩子函数?
created:实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见
mounted: el被新创建的 vm.\$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted被调用时vm.$el也在文档内。
activated: keep-alive组件激活时调用
14、Vue 的父组件和子组件生命周期钩子函数执行顺序？
Vue的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
加载渲染过程
父 beforeCreate -> 父 created-> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程
父beforeUpdate-> 子 beforeUpdate -> 子 updated-> 父 updated
父组件更新过程
父beforeUpdate -> 父 updated
销毁过程
父beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
15、在什么阶段才能访问操作DOM？
在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。
16、在哪个生命周期内调用异步请求？
可以在钩子函数 created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
1、能更快获取到服务端数据，减少页面loading 时间
2、ssr不支持beforeMount 、mounted钩子函数，所以放在 created 中有助于一致性
Vue-Router路由
17、vue-router 路由模式有几种？
vue-router 有 3 种路由模式：hash、history、abstract
1、hash: 使用 URL hash值来作路由。支持所有浏览器，包括不支持 HTML5 History Api的浏览器
2、history : 依赖 HTML5 History API和服务器配置。具体可以查看 HTML5 History 模式
3、abstract : 支持所有 JavaScript运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.
18、路由的跳转方式
一般有两种
1、声明式（标签跳转）
\标签会渲染标签，在template中的跳转都是这种；
2、编程式（ js跳转）
另一种是编程是导航 也就是通过js跳转 比如router.push('/home')
19、路由原理
前端路由实现起来其实很简单，本质就是监听
URL的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式
1、hash 模式
2、history 模式
www.test.com/##/ 就是 Hash URL，当##后面的哈希值发生变化时，不会向服务器请求数据，可以通过hashchange事件来监听到URL的变化，从而进行跳转页面。
History模式是HTML5新推出的功能，比之Hash URL更加美观
20、Vue的路由实现：hash模式 和 history模式
1、hash模式: 在浏览器中符号#，#以及#后面的字符称之为hash，用 window.location.hash 读取。特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。
2、history模式： history采用HTML5的新特性；且提供了两个新方法：pushState()， replaceState()可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更
21、vue路由的钩子函数
首页可以控制导航跳转，
beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
beforeEach主要有3个参数to，from，next
to：route即将进入的目标路由对象。
from：route当前导航正要离开的路由。
next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转
22、$route和$router的区别
$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等
23、vue-router怎么定义动态路由？怎么获取传过来的动态参数？
定义：path:'a/:value' 获取：this.$route.params.value。
Vuex
23、Vuex的工作流程，以及它的作用，使用场景。
vuex的工作流程：
1、在vue组件里面，通过dispatch来触发actions提交修改数据的操作。
2、然后再通过actions的commit来触发mutations来修改数据。
3、mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。
4、最后由store触发每一个调用它的组件的更新
Vuex的作用：项目数据状态的集中管理，复杂组件(如兄弟组件、远房亲戚组件)的数据通信问题。
24、vue 中 ajax 请求代码应该写在组件的methods中还是vuex 的action中
如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 vuex的 state 里
如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回
25、vuex是什么？怎么使用？哪种功能场景使用它？
1、只用来读取的状态集中放在store中；改变状态的方式是提交mutations，这是个同步的事件； 异步逻辑应该封装在action中。
2、在main.js引入store，注入。新建了一个目录store，… export
3、场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车
Vue其他相关
26、怎么快速定位哪个组件出现性能问题
用 timeline 工具。 大意是通过 timeline 来查看每个函数的调用时常，定位出哪个函数的问题，从而能判断哪个组件出了问题
27、MVVM
MVVM 由以下三个内容组成
View：界面
Model：数据模型
ViewModel：作为桥梁负责沟通 View 和 Model
28、路由懒加载
为了提升页面加载速度，实现按需加载，也就是当路由访问时才加载对应组件，我们可以结合vue的异步组件和webpack的代码分割功能来实现路由的懒加载。
{
path: '/iov/login',
name: '登录',
component: resolve => require(['@/views/login/login'], resolve),
},
{
path:'/iov/organization',
name:'组织管理',
component:() => import('@/views/enterprise/organization')
}
29、elementUI
表单弹窗中 elementform 清除验证残留提示
给表单添加不同的 ref （REFNAME），如果有相同的ref 会导致残留验证提示清除失败
this.dialogTranspor = true
//弹窗打开后 dom 没有生成，所有要用 this.$nextTick
this.$nextTick(function () {
this.$refs.REFNAME.resetFields();
})
页码数无法正常显示
场景：列表页在跳到详情或其他页面后再返回列表页，无法正常显示对应页数（页码数放在state中），但请求的数据时正常的;
解决方案：页码数、总页数必须要在同一个对象中，否则当前页码数不能正常显示
30、NextTick
nextTick可以让我们在下次DOM 更新循环结束之后执行延迟回调，用于获得更新后的 DOM
// 修改数据
vm.msg = 'Hello'
// DOM 还未更新
Vue.nextTick(function () {
// DOM 更新
})
31、指令v-el的作用是什么?
提供一个在页面上已存在的 DOM元素作为 Vue实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例,
32、在Vue中使用插件的步骤
采用ES6的import ... from ...语法或CommonJS的require()方法引入插件
使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true })