你要的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 的特点有哪些？

1、axios 是一个基于 promise 的 HTTP 库，支持 promise 的所有 API；

2、它可以拦截请求和响应；

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

4、它安全性更高，客户端支持防御 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