你要的Vue面试题都在这里。

1. Vue.js介绍

Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有很是容易上手的API；

Vue.js是一个构建数据驱动的Web界面的库。

Vue.js是一套构建用户界面的 渐进式框架。与其余重量级框架不一样的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，而且很是容易学习，很是容易与其它库或已有项目整合。另外一方面，Vue 彻底有能力驱动采用单文件组件和 Vue生态系统支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

简而言之：Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是经过尽量简单的 API实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

2.什么是 mvvm？

MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层表明数据模型，也能够在 Model 中定义数据修改和操做的业务逻辑；View 表明 UI 组件，它负责将数据模型转化成 UI 展示出来，ViewModel 是一个同步 View 和 Model 的对象。

3.简述Vue的响应式原理

当一个Vue实例建立时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter而且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每一个组件实例都有相应的 watcher 程序实例，它会在组件渲染的过程当中把属性记录为依赖，以后当依赖项的 setter 被调用时，会通知 watcher 从新计算，从而导致它关联的组件得以更新。

4.Vue.js特色

简洁：页面由HTML模板+Json数据+Vue实例组成

数据驱动：自动计算属性和追踪依赖的模板表达式

组件化：用可复用、解耦的组件来构造页面

轻量：代码量小，不依赖其余库

快速：精确有效批量DOM更新

模板友好：可经过npm，bower等多种方式安装，很容易融入

5.scss是什么？

预处理css，把css当前函数编写，定义变量,嵌套.

6.vue生命周期的理解？

总共分为 8 个阶段建立前/后，载入前/后，更新前/后，销毁前/后。

建立前/后： 在 beforeCreate 阶段，vue 实例的挂载元素 el 尚未。
载入前/后：在 beforeMount 阶段，vue 实例的$el 和 data 都初始化了，但仍是挂载以前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。
更新前/后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。
销毁前/后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，可是 dom 结构依然存在。

7.为何vue中data必须是一个函数？

对象为引用类型，当重用组件时，因为数据对象都指向同一个data对象，当在一个组件中修改data时，其余重用的组件中的data会同时被修改；而使用返回对象的函数，因为每次返回的都是一个新对象（Object的实例），引用地址不一样，则不会出现这个问题。

8.active-class是哪一个组件的属性？

vue-router模块的router-link组件。

9.vue-router有哪几种导航钩子？

三种。

一种是全局导航钩子：router.beforeEach(to,from,next)，做用：跳转前进行判断拦截。

第二种：组件内的钩子；

第三种：单独路由独享组件

10.说出至少4种vue当中的指令和它的用法？

v-if：判断是否隐藏；v-for：数据循环出来；v-bind:class：绑定一个属性；v-model：实现双向绑定

11.vue-loader是什么？使用它的用途有哪些？

解析.vue文件的一个加载器，跟template/js/style转换成js模块。

12.请说出vue.cli项目中src目录每一个文件夹和文件的用法？

assets文件夹是放静态资源；
components是放组件；
router是定义路由相关的配置;
view视图；
app.vue是一个应用主组件；
main.js是入口文件

13.计算属性和watch的区别

在咱们运用vue的时候必定少不了用计算属性computed和watch
computed计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值致使该计算属性改变时更新 DOM。这个功能很是强大，它可让你的代码更加声明式、数据驱动而且易于维护。

watch监听的是你定义的变量,当你定义的变量的值发生变化时，调用对应的方法。就好在div写一个表达式name，data里写入num和lastname,firstname,在watch里当num的值发生变化时，就会调用num的方法，方法里面的形参对应的是num的新值和旧值，而计算属性computed,计算的是Name依赖的值,它不能计算在data中已经定义过的变量。

14.prop 验证，和默认值

咱们在父组件给子组件传值得时候，为了不没必要要的错误，能够给prop的值进行类型设定，让父组件给子组件传值得时候，更加准确，prop能够传一个数字，一个布尔值，一个数组，一个对象，以及一个对象的全部属性。组件能够为 props 指定验证要求。若是未指定验证要求，Vue 会发出警告好比传一个number类型的数据，用defalt设置它的默认值，若是验证失败的话就会发出警告。

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

15. vue 组件通讯

父传递子

父：自定义属性名 + 数据（要传递）=> :value="数据"

子：props ["父组件上的自定义属性名“] =>进行数据接收)


子传递父

在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。

子： this.$emit('自定义事件名称', 数据) 子组件标签上绑定@自定义事件名称='回调函数'

父：methods: {自定义事件() {//逻辑处理} }


兄弟组件

经过中央通讯 let bus = new Vue()

A：methods :{ 函数{ bus.$emit('自定义事件名'，数据)} 发送

B：created （）{ bus.$on('A发送过来的自定义事件名'，函数)} 进行数据接收

16.vue路由传参数

1.使用query方法传入的参数使用 this.$route.query接受

2.使用params方式传入的参数使用 this.$route.params接受

17.vuex 是什么？ 有哪几种属性？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

有 5 种，分别是 state、getter、mutation、action、module


vuex 的 store 是什么？

vuex 就是一个仓库，仓库里放了不少对象。其中 state 就是数据源存放地，对应于通常 vue 对象里面的 datastate 里面存放的数据是响应式的，vue 组件从 store 读取数据，如果 store 中的数据发生改变，依赖这相数据的组件也会发生更新它经过 mapState 把全局的 state 和 getters 映射到当前组件的 computed 计算属性

vuex 的 getter 是什么？

getter 能够对 state 进行计算操做，它就是 store 的计算属性虽然在组件内也能够作计算属性，可是 getters 能够在多给件之间复用若是一个状态只在一个组件内使用，是能够不用 getters

vuex 的 mutation 是什么？

更改Vuex的store中的状态的惟一方法是提交mutation

vuex 的 action 是什么？

action 相似于 muation, 不一样在于：action 提交的是 mutation,而不是直接变动状态action 能够包含任意异步操做
vue 中 ajax 请求代码应该写在组件的 methods 中仍是 vuex 的 action 中

vuex 的 module 是什么？

面对复杂的应用程序，当管理的状态比较多时；咱们须要将vuex的store对象分割成模块(modules)。

若是请求来的数据不是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入 vuex 的 state 里若是被其余地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回

18.v-show和v-if指令的共同点和不一样点？

v-show指令是经过修改元素的displayCSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

19.如何让CSS只在当前组件中起做用？

将当前组件的 <style>修改成 <style scoped>

20.<keep-alive></keep-alive>的做用是什么？

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要用于保留组件状态或避免从新渲染。
大白话: 好比有一个列表和一个详情，那么用户就会常常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面，那么就能够对列表组件使用 <keep-alive></keep-alive>进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是从新渲染

21.delete和Vue.delete删除数组的区别？

delete只是被删除的元素变成了 empty/undefined 其余的元素的键值仍是不变。
Vue.delete直接删除了数组 改变了数组的键值。

var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[0]
console.log(a)  //[empty,2,3,4]
this.$delete(b,0)
console.log(b)  //[2,3,4]

22.$nextTick是什么？

vue实现响应式并非数据发生变化后dom当即变化，而是按照必定的策略来进行dom更新。

$nextTick 是在下次 DOM 更新循环结束以后执行延迟回调，在修改数据以后使用 $nextTick，则能够在回调中获取更新后的 DOM

23.v-on能够监听多个方法吗？

能够。

<input type="text" :value="name" @input="onInput" @focus="onFocus" @blur="onBlur" />

24.v-on 经常使用修饰符

.stop 该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation() 方法

.prevent 该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault() 方法

.self 该指令只当事件是从事件绑定的元素自己触发时才触发回调

.once 该修饰符表示绑定的事件只会被触发一次

25.v-for key的做用。

当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的改变，而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。
为了给Vue一个提示，以便它能跟踪每一个节点的身份，从而重用和从新排序现有元素，你须要为每项提供一个惟一 key 属性。key属性的类型只能为 string或者number类型。


key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。若是不使用 key，Vue 会使用一种最大限度减小动态元素而且尽量的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化从新排列元素顺序，而且会移除 key 不存在的元素。

26.v-for 与 v-if 的优先级

v-for比v-if优先，若是每一次都须要遍历整个数组，将会影响速度，尤为是当之须要渲染很小一部分的时候。

27.Vue子组件调用父组件的方法

第一种方法是直接在子组件中经过 this.$parent.event来调用父组件的方法
第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就好了。

28.Promise对象是什么？

1.Promise是异步编程的一种解决方案，它是一个容器，里面保存着某个将来才会结束的事件（一般是一个异步操做）的结果。从语法上说，Promise 是一个对象，从它能够获取异步操做的消息。Promise 提供统一的 API，各类异步操做均可以用一样的方法进行处理。promise对象是一个构造函数，用来生成Promise实例；

2.promise的两个特色 对象状态不受外界影响 && 一旦状态改变，就不会再变，任什么时候候均可以获得结果（pending状态-->fulfilled || pending-->rejected）

29.axios的特色有哪些？

一、axios是一个基于promise的HTTP库，支持promise的全部API；

二、它能够拦截请求和响应；

三、它能够转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；

四、它安全性更高，客户端支持防护XSRF；

30.vue中的 ref 是什么？

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子组件上，引用就指向组件实例。

31.Vue的路由模式,实现方式？

hash模式 和 history模式

hash模式：在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取；
特色：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动做，对服务端安全无用，hash不会重加载页面。
hash 模式下:仅 hash 符号以前的内容会被包含在请求中，如 http://www.xxx.com，所以对于后端来讲，即便没有作到对路由的全覆盖，也不会返回 404 错误。

history模式：history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）能够对浏览器历史记录栈进行修改，以及popState事件的监听到状态变动。

history 模式:前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端若是缺乏对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还须要后台配置支持……因此呢，你要在服务端增长一个覆盖全部状况的候选资源：若是 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

32.$route和$router的区别？

$route是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name等路由信息参数。

$router是'路由实例'对象包括了路由的跳转方法，钩子函数等。

33.vue.js的两个核心是什么？

数据驱动、组件系统

34.vue如何兼容ie的问题。

babel-polyfill插件

35.页面刷新vuex被清空解决办法？

1.localStorage 存储到本地再回去

2.从新获取接口获取数据

36.如何优化SPA应用的首屏加载速度慢的问题？

1.将公用的JS库经过script标签外部引入，减少 app.bundel 的大小，让浏览器并行下载资源文件，提升下载速度；

2.在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；

3.加一个首屏loading图，提高用户体验；

37.Vue 改变数组触发视图更新

如下方法调用会改变原始数组：push(), pop(), shift(), unshift(), splice(), sort(), reverse(),Vue.set( target, key, value )

调用方法：Vue.set( target, key, value )
target：要更改的数据源(能够是对象或者数组)
key：要更改的具体数据
value ：从新赋的值

38.DOM 渲染在哪一个周期中就已经完成？

mounted

注意 mounted 不会承诺全部的子组件也都一块儿被挂载。若是你但愿等到整个视图都渲染完毕，能够用 vm.$nextTick 替换掉 mounted

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

39.简述每一个周期具体适合哪些场景

beforecreate : 能够在这加个loading事件，在加载实例时触发

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

mounted : 挂载元素，获取到DOM节点 updated : 若是对数据统一处理，在这里写上相应函数

beforeDestroy : 能够作一个确认中止事件的确认框

40.第一次加载会触发哪几个钩子？

会触发beforeCreate , created ,beforeMount ,mounted

41.动态绑定class

active classname， isActive 变量

<div v-bind:class="{ active: isActive }"></div>

---

本文主要是一些基础知识。但愿能帮助那些即将或正在找工做的同行们。

最后

若是文中有错误，请务必留言指正，万分感谢。

点个赞哦，让咱们共同窗习，共同进步。

GitHub