超硬核超全前端Vue2.0面试题（轻松了解框架）

1.vuex的作用？

vuex是一个专门为vue.js应用程序开发的状态管理模式
vuex可以帮助我们管理共享状态，也就是管理全局变量
vuex的几个核心概念：
    vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性
    state:state意为'状态'，是vuex状态管理的数据源
    getter:getter的作用与filters有一些相似，可以将state进行过滤后输出
    mutation:mutation是vuex中改变state的唯一途径，并且只能同步操作
    action:一些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态
    module:当store对象过于庞大时，可以根据具体的业务需求分为多个module

我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

2.vue中的路由拦截器的作用？

路由拦截，权限设置
例如：当用户没有登录权限的时候就会跳转到登录页面，用到的字段requireAuth:true

3.axios的作用？

vue中的ajax，用于向后台发起请求
特点：
    从浏览器中创建XMLHttpRequests
    从node.js创建http请求
    支持Promise API
    拦截请求和响应
    转换请求数据和响应数据
    取消请求
    自动转换json数据
    客户端支持防御XSRF
promise：
    一个对象用来传递异步操作的信息
    promise的出现主要是解决地狱回调的问题，无需多次嵌套
    本质：分离异步数据获取和业务
拦截器分为请求拦截器和响应拦截器
#请求拦截器
axios.interceptors.request.use(function(config){
    return config;
},function(error){
    return Promise.reject(error);
});
#响应拦截器
axios.interceptors.response.use(function(response){
    return response;
},function(error){
    return Promise.reject(error);
});

4.列举vue的常见指令。

1.文本插值：{{}} Mustache
    <div id='app'>
        {{message}}
    </div>
2.DOM属性绑定：v-bind
    <div id='app-2'>
        <span v-bind:title='message'>
            鼠标悬停几秒钟查看此处动态绑定的提示信息
        </span>
    </div>
3.指令绑定一个事件监听器：v-on
    <div id='app-5'>
        <p>{{message}}</p>
        <button v-on:click='reverseMessage'>逆转消息</button>
    </div>
4.实现表单输入和应用状态之间的双向绑定：v-model
    <div id='app-6'>
        <p>{{message}}</p>
        <input v-model='message'>
    </div>
5.控制切换一个元素的显示：v-if和v-else
    <div id='app-3'>
        <p v-if='seen'>现在你看到我了</p>
    </div>
6.列表渲染:v-for
    <div id='app-4'>
        <ol>
            <li v-for='todo in todos'>
                {{todo.text}}
            </li>
        </ol>

5.列举Http请求中常见的请求方式？

get
    向特定的路径资源发出请求，数据暴露在url中
post
    向指定路径资源提交数据进行处理请求，数据包含在请求体中
options
    返回服务器针对特定资源所支持的http请求方法，允许客户端查看，测试服务器性能
head
    向服务器与get请求相一致的响应，响应体不会返回，可以不必传输整个响应内容
put
    从客户端向服务器端传送的数据取代指定的文档的内容
delete
    请求服务器删除指定的页面
trace
    回显服务器收到的请求，主要用于测试或者诊断
connect
    http/1.1协议中预留给能够将连接改为管道方式的代理服务

6.对于MVVM的理解

MVVM 是 Model-View-ViewModel 的缩写。
　　Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。
　　View 代表UI 组件，它负责将数据模型转化成UI 展现出来。
　　ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。
　　viewmodel和model实现双向数据绑定

7.Vue的生命周期

1.什么是vue生命周期？
　　　　答： Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
　　2.vue生命周期的作用是什么？
　　　　答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
　　3.vue生命周期总共有几个阶段？
　　　　答：它可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
　　4.第一次页面加载会触发哪几个钩子？
　　　　答：会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
　　5.DOM 渲染在 哪个周期中就已经完成？
　　　　答：DOM 渲染在 mounted 中就已经完成了。

8.Vue实现数据双向绑定的原理：Object.defineProperty（）

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

9.Vue组件间的参数传递

1.父组件与子组件传值
　　　　父组件传给子组件：子组件通过props方法接受数据;
　　　　子组件传给父组件：$emit方法传递参数
　　2.非父子组件间的数据传递，兄弟组件传值
　　　　eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）

10.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 依赖的页面。”

11.vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。
　　beforeEach主要有3个参数to，from，next：
　　to：route即将进入的目标路由对象，
　　from：route当前导航正要离开的路由
　　next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

12.vue-cli如何新增自定义指令？

1.创建局部指令

var app = new Vue({
    el: '#app',
    data: {    
    },
    // 创建指令(可以多个)
    directives: {
        // 指令名称
        dir1: {
            inserted(el) {
                // 指令中第一个参数是当前使用指令的DOM
                console.log(el);
                console.log(arguments);
                // 对DOM进行操作
                el.style.width = '200px';
                el.style.height = '200px';
                el.style.background = '#000';
            }
        }
    }
})

2.全局指令

Vue.directive('dir2', {
    inserted(el) {
        console.log(el);
    }
})

3.指令的使用

<div id="app">
    <div v-dir1></div>
    <div v-dir2></div>
</div>

13.vue如何自定义一个过滤器？

html代码：

<div id="app">
     <input type="text" v-model="msg" />
     {{msg| capitalize }}
</div>

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)
      }
    }
})

全局定义过滤器

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

过滤器接收表达式的值 (msg) 作为第一个参数。capitalize 过滤器将会收到 msg的值作为第一个参数。

14.对keep-alive 的了解？

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 。

使用示例

<!-- 逗号分隔字符串，只有组件a与b被缓存。 -->
<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>

15.v-if 和 v-show 区别

答：v-if按照条件是否渲染，v-show是display的block或none；

16.vue几种常用的指令

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

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

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

18.vue常用的修饰符？

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

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

答：数据驱动、组件系统

20.vue中 key 值的作用？

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

21.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

  当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setter 的形式，实现数据劫持(暂不谈 Vue3.0 的 Proxy)；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新试图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。
  当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify(),Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

22.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?

考点: Vue 的变化侦测原理
前置知识: 依赖收集、虚拟 DOM、响应式系统
现代前端框架有两种方式侦测变化，一种是pull，一种是push
pull: 其代表为React，我们可以回忆一下React是如何侦测到变化的,我们通常会用setStateAPI显式更新，然后React会进行一层层的Virtual Dom Diff操作找出差异，然后Patch到DOM上，React从一开始就不知道到底是哪发生了变化，只是知道「有变化了」，然后再进行比较暴力的Diff操作查找「哪发生变化了」，另外一个代表就是Angular的脏检查操作。
push: Vue的响应式系统则是push的代表，当Vue程序初始化的时候就会对数据data进行依赖的收集，一但数据发生变化,响应式系统就会立刻得知。因此Vue是一开始就知道是「在哪发生变化了」，但是这又会产生一个问题，如果你熟悉Vue的响应式系统就知道，通常一个绑定一个数据就需要一个Watcher，一但我们的绑定细粒度过高就会产生大量的Watcher，这会带来内存以及依赖追踪的开销，而细粒度过低会无法精准侦测变化,因此Vue的设计是选择中等细粒度的方案,在组件级别进行push侦测的方式,也就是那套响应式系统,通常我们会第一时间侦测到发生变化的组件,然后在组件内部进行Virtual Dom Diff获取更加具体的差异，而Virtual Dom Diff则是pull操作，Vue是push+pull结合的方式进行变化侦测的。

23.watch、methods 和 computed 的区别?

watch 为了监听某个响应数据的变化。computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。
methods是一个方法，它可以接受参数，而computed 不能，computed 是可以缓存的，methods 不会。computed 可以依赖其他 computed，甚至是其他组件的 data。

24.vue 中怎么重置 data?

使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data(this)可以获取到组件初始化状态下的data。
Object.assign(this.$data,this.$options.data(this)) // 注意加this，不然取不到data() { a: this.methodA } 中的this.methodA。

25.组件中写 name 选项有什么作用？

项目使用 keep-alive 时，可搭配组件 name 进行缓存过滤
DOM 做递归组件时需要调用自身 name
vue-devtools 调试工具里显示的组见名称是由vue中组件name决定的

27.vue-router 有哪些钩子函数?

官方文档：vue-router钩子函数
全局前置守卫 router.beforeEach
全局解析守卫 router.beforeResolve
全局后置钩子 router.afterEach
路由独享的守卫 beforeEnter
组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

28.Vue 的 nextTick 的原理是什么？

1. 为什么需要 nextTick
   Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改–刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。
2. 理解原理前的准备
   首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章–彻底搞懂浏览器 Event-loop
   常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
   常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;
3. 理解 nextTick
   而 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。