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