Vue 笔试题汇总

时间 2019-11-08

原文原文链接

本人工做两年，工做跳槽。javascript

今天面试遇到笔试题，发现一道题也没有答上来，特在此对Vue的面试题进行一个汇总，资料来源：网络收集 , 本人面试收集。css

感谢如下连接的做者：html

连接：https://www.jianshu.com/p/c2da05a708b2
连接：https://blog.csdn.net/snshl9db69ccu1aikl9r/article/details/90652219
连接：https://segmentfault.com/a/1190000016434836?utm_source=tag-newest#articleHeader1
连接：https://blog.csdn.net/weixin_39068791/article/details/81363670
连接：https://www.jianshu.com/p/b1dd80f4d542
连接：https://www.cnblogs.com/fozero/p/10863667.html
连接：https://segmentfault.com/a/1190000016344599?utm_source=tag-newestvue

概念经验篇

1. 什么是 MVVM？

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

在 MVVM 架构下，View 和 Model 之间并无直接的联系，而是经过 ViewModel 进行交互。面试

我的理解:ajax

ViewModel 其实就是咱们建立的Vue实例new Vue({ }) （咱们一般在这里面写代码）。
Model (数据模型层) 其实就是咱们写在HTML中的变量( v-html='data' ,这里的data就是数据模型 )
View( 视图层，即表现层 ) 其实就是咱们写的布局,只包含HTML+CSS样式。
咱们写好布局(HTML+CSS)(View层)，在HTML代码中写Vue实例中的data 定义的变量(Model层)，而后在ViewModel写业务逻辑，咱们对数据操做彻底在ViewModel完成。

2. MVVM 和 MVC 区别？

MVC和 MVVM 都是一种设计思想。主要就是 MVC 中 Controller 演变成 MVVM 中的 ViewModel。MVVM 主要解决了 MVC 中大量的 DOM 操做使页面渲染性能下降，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者须要主动更新到 View 。vue-router

3. Vue 的优势是什么？

低耦合、可重用性、独立开发、可组件化。vuex

低耦合 : 就是写一个组件，在任何复杂的项目，任何复杂的场景下，均可以即拿即用。
可重用性 : 你能够把一些视图逻辑放在一个 ViewModel 里面，让不少 View 重用这段视图逻辑。
独立开发 : 开发人员能够专一于业务逻辑和数据的开发（ViewModel），设计人员能够专一于页面设计( UI )。
可组件化：可将视图某个部分提取出来做为一个单独的组件，单独书写业务逻辑(ViewModel)。

4. Vue配置选项?

el: 最外层元素选择器 : '#app'
    props: 声明接收父组件哪些属性。
    data: 状态数据（）{return{}}
    computed: 计算属性:{}
    methods: 事件回调函数{}
    watch: 监视属性变化{fun}
    directives: 注册局部指令Vue.directive('my-directive', function(el, binding){
            el.innerHTML = binding.value.toupperCase()
    })
    filters: 注册局部过滤器 vue.filter()
components: 局部注册组件segmentfault

directives : {
            'my-directive' : function (el, binding) {
                        el.innerHTML = binding.value.toupperCase()
               }
        }

5. Vue生命周期的理解( Vue 实例从建立到销毁的过程 )？

详情：http://www.javashuo.com/article/p-wkvksxjl-hm.html。

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

建立前(beforeCreate)：
建立后(created)：
载入前(beforeMount)：
载入后(mounted)：
更新前(beforeUpdate) :
更新后(updated)：
销毁前/后 (beforeDestroy/destroy) ：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，可是 dom 结构依然存在。

第一次页面加载会触发哪几个钩子

beforeCreate, created, beforeMount, mounted 这四个钩子。

经常使用的生命周期函数。

created
mounted
activated: keep-alive组件激活时调用。

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

beforecreate : 能够在这加个loading事件，在加载实例时触发。
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 若是对数据统一处理，在这里写上相应函数
beforeDestroy : 能够作一个确认中止事件的确认框
nextTick : 更新数据后当即操做dom

7.对nextTick的理解

实际上,Vue的修改数据是到更新视图是异步的。Vue 在修改数据后，视图不会马上更新，而是等同一事件循环中的全部数据变化完成以后，再统一进行视图更新。这时候就要用nextTick监听视图已经更新了,能够对更新好的视图进行操做。

使用场景:

一、点击按钮显示本来以 v-show = false 隐藏起来的输入框，并获取焦点。

showsou(){
      this.showit = true //修改 v-show
      document.getElementById("keywords").focus()  //在第一个 tick 里，获取不到输入框，天然也获取不到焦点
  }

showsou(){
     this.showit = true
     this.$nextTick(function () {
      // DOM 更新了
        document.getElementById("keywords").focus()
     })
   }

二、使用 swiper 插件经过 ajax 请求图片后的滑动问题。

8.怎么定义vue-router的动态路由以及如何获取传过来的动态参数？

在router目录下的index.js文件中，对path属性加上/:id。
使用router对象的params.id。

9.v-show和v-if指令的共同点和不一样点。

共同点:

1.二者都是用来控制 DOM元素在View层的显示/隐藏。

不一样点 :

v-show指令是经过修改元素的display的CSS属性让其显示或者隐藏。
v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果。

10.为何避免 v-if 和 v-for 用在一块儿

当 Vue 处理指令时，v-for 比 v-if 具备更高的优先级，经过v-if 移动到容器元素，不会再重复遍历列表中的每一个值。取而代之的是，咱们只检查它一次，且不会在 v-if 为否的时候运算 v-for。

11.自定义指令(v-check, v-focus) 的方法有哪些? 它有哪些钩子函数? 还有哪些钩子函数参数。

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另外一个是函数。
组件内定义指令：directives钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)
钩子函数参数： el、binding

11.路由之间跳转？

方式一：

router.push('index')
组件中使用 : this.$router.push('index')

方式二：

<router-link :to="{ path: '/home' }">Home</router-link>
<router-link :to="{ name: 'Home'}">User</router-link>

12.路由按需加载

component: resolve => require(['@/components/home/home'],resolve)

12.vuex 是什么？怎么使用？哪一种功能场景使用它？

Vue 框架中状态管理。

步骤：

新建了一个目录 store， export 。
在 main.js 引入 store，注入。

使用场景：

单页应用中，组件之间的状态。如：音乐播放、登陆状态、加入购物车。

13.vue-router 有哪几种导航钩子?

三种

全局导航钩子
router.beforeEach(to, from, next),
router.beforeResolve(to, from, next),
router.afterEach(to, from ,next)
组件内钩子
beforeRouteEnter,
beforeRouteUpdate,
beforeRouteLeave
单独路由独享组件
beforeEnter

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

v-if(判断是否隐藏)、v-for(把数据遍历出来)、v-bind(绑定属性)、v-model(实现双向绑定)

15.双向数据绑定实现（待）

16.vuex 有哪几种属性。

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

state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步！
actions => 像一个装饰器，包裹mutations，使之能够异步。
modules => 模块化Vuex

17.Vuex 的 store 特性是什么(即:是什么，有什么用？待连接)

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

18.Vuex 的 mutation 特性是什么（即:是什么，有什么用？）

action 相似于 muation, 不一样在于 : action 提交的是 mutation,而不是直接变动状态action 能够包含任意异步操做。

19.Vue 中 ajax 请求代码应该写在组件的 methods 中仍是 vuex 的 action 中。

若是请求来的数据不是要被其余组件公用，仅仅在请求的组件内使用，就不须要放入 vuex 的 action 里。

若是被其余地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回。

20.vuex 原理

vuex 仅仅是做为 vue 的一个插件而存在，不像 Redux,MobX 等库能够应用于全部框架，vuex 只能使用在 vue 上，很大的程度是由于其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，vuex 总体思想诞生于 flux,可其的实现方式完彻底全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。

最后一句话结束 vuex 工做原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件。

单句篇

21.css只在当前组件起做用

在style标签中写入scoped便可例如：<style scoped></style>

22.v-if 和 v-show 区别

v-if按照条件是否渲染/销毁DOM，v-show用display的block或none控制显示/隐藏。

23.$route和$router的区别

$route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。而$router是“路由实例”对象包括了路由的跳转方法，钩子函数等。

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

数据驱动、组件系统。

25.vue几种经常使用的指令

v-for 、 v-if 、v-bind、v-on、v-show、v-else

26.vue经常使用的修饰符？

prevent: 提交事件再也不重载页面；.stop: 阻止单击事件冒泡；.self: 当事件发生在该元素自己而不是子元素的时候会触发；.capture: 事件侦听，事件发生的时候会调用。

27.v-on 能够绑定多个方法吗？

能够。

28.Vue中 key 值的做用？

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。若是数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每一个元素，而且确保它在特定索引下显示已被渲染过的每一个元素。key的做用主要是为了高效的更新虚拟DOM。

29.什么是Vue的计算属性？

在模板中放入太多的逻辑会让模板太重且难以维护，在须要对数据进行复杂处理，且可能屡次使用的状况下，尽可能采起计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部this指向vm实例；④在template调用时，直接写计算属性名便可；⑤经常使用的是getter方法，获取数据，也可使用set方法改变数据；⑥相较于methods，无论依赖的数据变不变，methods都会从新计算，可是依赖数据不变的时候computed从缓存中获取，不会从新计算。

30.vue等单页面应用及其优缺点

优势：Vue 的目标是经过尽量简单的 API 实现响应的数据绑定和组合的视图组件，核心是一个响应的数据绑定系统。MVVM、数据驱动、组件化、轻量、简洁、高效、快速、模块友好。
缺点：不支持低版本的浏览器，最低只支持到IE9；不利于SEO的优化（若是要支持SEO，建议经过服务端来进行渲染组件）；第一次加载首页耗时相对长一些；不可使用浏览器的导航按钮须要自行实现前进、后退。

31.怎么定义 vue-router 的动态路由? 怎么获取传过来的值

在 router 目录下的 index.js 文件中，对 path 属性加上 /:id，使用 router 对象的 params.id 获取。

美团试题篇

32. 使用 Vuex 只需执行 Vue.use(Vuex)，并在 Vue 的配置中传入一个 store 对象的示例，store 是如何实现注入的？

Vue.use(Vuex) 方法执行的是 install 方法。它实现了 Vue 实例对象的 init 方法封装和注入，使传入的 store 对象被设置到 Vue 上下文环境的store中。所以在VueComponent任意地方都可以经过this.$store 访问到该 store。

33. state 内部支持模块配置和模块嵌套，如何实现的？

在 store 构造方法中有 makeLocalContext 方法，全部 module 都会有一个 local context，根据配置时的 path 进行匹配。

因此执行如 dispatch('submitOrder', payload)这类 action 时，默认的拿到都是 module 的 local state，若是要访问最外层或者是其余 module 的 state，只能从 rootState 按照 path 路径逐步进行访问。

34. 在执行 dispatch 触发 action(commit 同理)的时候，只需传入(type, payload)，action 执行函数中第一个参数 store 从哪里获取的？

store 初始化时，全部配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的全部处理方法都是被封装后的，其第一个参数为当前的 store 对象，因此可以获取到 { dispatch, commit, state, rootState } 等数据。

35. Vuex 如何区分 state 是外部直接修改，仍是经过 mutation 方法修改的？

Vuex 中修改 state 的惟一渠道就是执行 commit('xx', payload) 方法，其底层经过执行 this._withCommit(fn) 设置_committing 标志变量为 true，而后才能修改 state，修改完毕还须要还原_committing 变量。外部修改虽然可以直接修改 state，可是并无修改_committing 标志位，因此只要 watch 一下 state，state change 时判断是否_committing 值为 true，便可判断修改的合法性。

36. 调试时的"时空穿梭"功能是如何实现的？

devtoolPlugin 中提供了此功能。由于 dev 模式下全部的 state change 都会被记录下来，'时空穿梭' 功能其实就是将当前的 state 替换为记录中某个时刻的 state 状态，利用 store.replaceState(targetState) 方法将执行 this._vm.state = state 实现。