前言：一句话就能回答的VUE面试题
vue中$emit事件无法触发？
emit里的事件名不要用大写字母；
渲染的时候key给什么值，可以使用index吗，用id好还是index好？
当我们在使用v-for进行渲染时，尽可能使用渲染元素自身属性的id给渲染的元素绑定一个key值，这样在当前渲染元素的DOM结构发生变化时，能够单独响应该元素而不触发所有元素的渲染。
1.css只在当前组件起作用
答：在style标签中写入scoped例如：<style scoped></style>
2.v-if 和 v-show 区别
答：v-if按照条件是否渲染，v-show是display的block或none；
3.$route和$router的区别
答：$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。
4.vue.js的两个核心是什么？
答：数据驱动、组件系统
5.vue几种常用的指令
答：v-for 、 v-if 、v-bind、v-on、v-show、v-else
6.vue常用的修饰符？
答：.prevent: 提交事件不再重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素本身而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用
7.v-on 可以绑定多个方法吗？
答：可以
8.vue中 key 值的作用？
答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key的作用主要是为了高效的更新虚拟DOM。
9.什么是vue的计算属性？
答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。
好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名即可；⑤常用的是getter方法，获取数据，也可以使用set方法改变数据；⑥相较于methods，不管依赖的数据变不变，methods都会重新计算，但是依赖数据不变的时候computed从缓存中获取，不会重新计算。
10.vue等单页面应用及其优缺点
答：优点：Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（如果要支持SEO，建议通过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可以使用浏览器的导航按钮需要自行实现前进、后退。。
一：v-show和v-if有什么区别？
1：v-if通过添加或删除dom元素，v-show是通过控制css样式display来显示和隐藏；
2：v-if在有一个局部的编译/卸载的过程，切换过程中合适的销毁和重构内部事件、组件‘；v-show只是简单地css的切换；
3：v-if是惰性的；如果初始条件为假，什么也不做。只有条件第一次为真的时候才开始局部编译；v-show在任何条件下可以编译，然后被缓存，保留DOM元素；
4：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
5：v-if适合运营条件不大可能改变；v-show适合频繁切换；
二：vue中MVVM模式是怎么样的？
1：model View Viewmodel 的缩写；
model代表数据模型；
view 代表视图；
Viewmodel代表：监听数据本模型的改变和视图的变化，处理用户交互，简单的理解链接view 和model；
2：viewmodel通过双向数据绑定把view和model联系起来了；不需要手动的操作dom；维护复杂的数据只需要mvvm就可以了；
三：什么是双向数据绑定；
1：vue实现双向数据绑定主要是通过：数据劫持结合发布者-订阅者的方式；通过defidended-property()方法来劫持每个属性的setter、getter，数据变动时发布给订阅者，触发相应的回调。把一个普通的js对象传给VUE实例来作为他的data选项时候，vue实例遍历它的属性用Object.definedproperty将他们转换成setter、gettter；但是内部VUE追踪依赖，当属性访问和修改时通知变化；
vue的双向数据绑定将mvvm作为入口，整合Observer、complie，watcher，三者，通过Observerl监听model的改变，通过compile来编译模板指令，最终利用watcher 搭起observer和compile之间的桥梁；达到数据变化，视图更新；视图变化，达到改变model变化；
四：vue生命周期；
从创建到销毁的过程，称为生命周期；
作用：生命周期中有很多钩子，能够利用钩子事件控制整个vue实例过程中更容易形成好的逻辑；
第一次加载触发哪几个钩子：
beforeCreate created beforeMounted Mounted
DOM渲染在mounted中渲染完成；
1>：创建前/后
2>：挂载前/后
3>：更新前/后
4>：销毁钱/后
4.1：Vue 的父组件和子组件生命周期钩子函数执行顺序？
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：
- 加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
- 子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
- 父组件更新过程
父 beforeUpdate -> 父 updated
- 销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
五：VUE组件之间的传值
1：父组件向子组件传值：父组件中引入子组件，父组件定义要传的值，子组件通过定义Prop来接收传值，
2：子组件向父组件传值：在父组件中定义一个方法接收子组件传值，在子组件中定义一个触发事件，通过$emit发射给子组件。
组件之间的传值：当项目比较小的时候，使用中心
3：兄弟组件之间的传值
1>：兄弟组件之间的传值需要借助事件车；
2>：穿件一个VUE实例，让兄弟两个公用一个事件机制；
3>：数据传递方：使用Bus.$emit(方法名，传递数据)
数据接收方：通过mounted(){}触发Bus.$on(方法名，Function(接收数据的参数){})
六：Vue路由钩子函数；
首页可以控制导航跳转，beforeEach afterEach 等，一般用于修改页面跳转。
beforeEach(from ,to,next){}
to:route即将进入的目标路由；
from:route即将离开的路由；
next:function一定调用该方法，resolve这个钩子，执行效果依赖next的参数，可以控制网页跳转；
七：VUEX是什么，怎么使用，哪些场景可以使用；
1：vue单页面组件的开发中的全局状态管理。简单的理解就是在store.js中定义一个数据之后，在全局任何一个组件中都可以获取，修改，并且修改之后立刻能够更新到全局。
1>:state:读取状态数据都保存在state中，是store中的唯一数据源；
// 定义 new Vuex.Store({ state: { allProducts: [] } //... }) // 组件中获取 this.$store.state.allProducts
2>:moutation：改变state中数据的唯一途径，不能处理异步数据。（重点）
mutations: { setProducts (state, products) { state.allProducts = products } } // 组件中使用 this.$store.commit('setProducts', {//..options})
3>:getters：和vue中的computed 类似，属于计算属性，基于state第二次包装，常用于多个数据的筛选和相关计算；
getters: { cartProducts(state, getters, rootState) => (getters.allProducts.filter(p => p.quantity)) } // 组件中获取 this.$store.getters.cartProducts
4>:actions：类似moutation，用于提交matation中状态的改变，但是他不能直接改变moutation中的值；可以包含异步操作；
// 定义（shop为api） actions: { getAllProducts ({ commit }, payload) { shop.getProducts((res) => { commit('setProducts', res) }) } } // 组件中使用 this.$store.dispatch('getAllProducts', {//..payload})
5>:modules：类似于命名空间，将各个组件之间的变量分开操作和定义，便于维护
// 定义 const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) // 组件中使用 store.state.a // -> moduleA 的状态 store.state.b // -> moduleB 的状态
八：VUE-cli如何新增自定义指令；
1.创建局部指令
var app = New Vue({ el:'#app', data:{} //创建指令，可以多个 directives() { inserted(el) { // 指令中第一个参数是当前使用指令的DOM console.log(el); console.log(arguments); // 对DOM进行操作 el.style.width = '200px'; el.style.height = '200px'; el.style.background = '#000'; } } })
2:全局指令
directive（dir2，{ innserted(el){ console.log(el); } }）
3:指令的使用
<div id="app"> <div v-dir1></div> <div v-dir2></div> </div>
九：VU如何定义一个过滤器；
1：html代码：
<div id="app"> <input type="text" v-model="msg" /> {{msg| capitalize }} </div>
2：JS代码；
var vm=new Vue({ el:"#app", data:{ msg:'' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
3：定义全局过滤：
vue.filter('capitalize:': ,{function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } })
过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。
十：对VUEkeep-live 的理解？
keep-alive是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。
在vue 2.1.0 版本之后，keep-alive新加入了两个属性: include(包含的组件缓存) 与 exclude(排除的组件不缓存，优先级大于include)
<keep-alive include='include_components' exclude='exclude_components'> <component> <!-- 该组件是否缓存取决于include和exclude属性 --> </component> </keep-alive>
参数解释
include - 字符串或正则表达式，只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式，任何名称匹配的组件都不会被缓存
include 和 exclude 的属性允许组件有条件地缓存。二者都可以用“，”分隔字符串、正则表达式、数组。当使用正则或者是数组时，要记得使用v-bind 。
<keep-alive include="a,b"> <component></component> </keep-alive> <!-- 正则表达式 (需要使用 v-bind，符合匹配规则的都会被缓存) --> <keep-alive :include="/a|b/"> <component></component> </keep-alive> <!-- Array (需要使用 v-bind，被包含的都会被缓存) --> <keep-alive :include="['a', 'b']"> <component></component> </keep-alive>
阿龙学堂整理发布：www.alongxuetang.com