Vue北京面试题

vue北京面试题

1、Vue 解决了什么问题

① 虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式。

② 视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

③ 组件化：把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护

2、MVVM 的理解

MVVM 就是 Model-View-ViewModel 的缩写，MVVM 将视图和业务逻辑分开。

View：视图层，Model 数据模型，而 ViewModel 是把两者建立通信的桥梁。

在 MVVM 框架下，View 和 Model 之间没有直接的联系，而是通过 ViewModel 进行交互。View 和 ViewModel 之间以及 Model 和 ViewModel 之间的交互都是双向的，因此 view 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。可以说它们两者是实时更新的，互相影响。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作 DOM，也不需要关注数据状态的同步问题，这些都由 MVVM 统一管理。

3、如何实现一个自定义组件，不同组件之间是如何通信的

请永远牢记 vue 是单向数据流

自定义组件：

      创建子组件的文件，建立组件的模板，把架子搭起来，也就是在子组件中写好<template>视图层，<script>逻辑层<style>css样式层。然后定义好props里面的数据，实现子组件需要的逻辑代码后，也就封装好了，然后直接调用即可。调用的花import引入，同时在父组件<script>（逻辑层）中的components这个对象中写入组件名称，最后挂载到父组件的template中即可。

组件通信：

①props / $emit

父组件通过 props 的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

②$children / $parent

this.$children[0].msg = "hello world" //父组件修改子组件data中的数据
this.$parent.mag //子组件拿到父组件 data 中的数据

$children的值是数组，$parent 的值是个对象复制代码

注意：$parent，$children 它们的目的是作为访问数组的应急方法，更推荐用 props 和 events 实现父子组件通信。

③provide / inject

这是 vue2.2.0 新增的 api，简单来说就是父组件中通过 provide 来提供变量，然后再子组件中通过 inject 来注入变量。

//父组件
export default{
	name:"A",
	provide:{
	for:"demo"
},
components:{
	comB
}
}

//子组件
export default{
	name:"B",
	inject:["for"],
	data(){
		demo:this.for
	}
}

④ref / refs

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例，可通过实例直接调用组件的方法或访问数据。

//父组件
<template>
<component-a ref="comA"></component-a>
</template>

<script>
    export default{
        mounted(){
            const comA = this.$refs.comA;
            console.log(comA.name)//Vue.js
            comA.sayHello() //hello
        }
    }
</script>

//子组件
export default{
data(){
return {
name:"Vue.js"
}
},
methods:{
sayHello(){
console.log("hello")
}
}
}

⑤eventBus(Bus 总线)：

//首先在 src 中创建一个 Bus 文件夹 => index.js
import Vue from "vue";
export default new Vue({

})

//子组件 1(发送数据的组件)
<button @click="add()">点击</button>
import Bus from "@/Bus"
add(){
Bus.\$emit("add",this.content);
}

//子组件 2(接受数据的组件)

<p>{{tit}}</p>
import Bus from "@/Bus";
created(){
    Bus.$on("add",(data) => {
        this.tit = data;
    })
}

⑥Vuex；

⑦LocalStorage；

⑧$attrs / $listeners

 将数据挂在到子组件的标签上去后，在子组件中使用this.$attrs直接获取到所有挂载的数据，返回的是一个对象。

4、nextTick 的理解

使用 nextTick 的原因：Vue 是异步修改 DOM 的，并且不鼓励开发者直接接触 DOM，但是有时候需要必须对数据更改后的 DOM 元素做相应的处理，但是获取到的 DOM 数据并不是更改后的数据，这时候就需要 this.$nextTick()；

原理：Vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。

使用：

//HTML
<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
name:"app",
data(){
	return {
		msg:"123"
	}
},
methods:{
change(){
	this.msg = "456";
	console.log(this.refs["gss"].innerHTML)//123
	this.$nextTick(function(){
	console.log(this.refs["gss"].innerHTML)//456
})
}
}

}

5、Vue 的生命周期(11 个钩子函数)

⑴beforeCreate(创建前)：在此生命周期函数执行的时候，data 和 methods 中的数据都还没有初始化。

⑵created(创建后)：在此生命周期函数中，data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作。

⑶beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。

⑷mounted(载入后)：此时页面和内存中都是最新的数据，这个钩子函数是最早可以操作 dom 节点的方法。

⑸beforeUpdate(更新前)：此时页面中显示的数据还是旧的，但是 data 中的数据是最新的，且页面并未和最新的数据同步。

⑹Updated(更新后)：此时页面显示数据和最新的 data 数据同步。

⑺beforeDestroy(销毁前)：当执行该生命周期函数的时候，实例身上所有的 data，所有的 methods 以及过滤器…等都处于可用状态，并没有真正执行销毁。

⑻destroyed(销毁后)：此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。
//下面两个钩子函数一般配合使用

⑼activated(组件激活时)：和上面的 beforeDestroy 和 destroyed 用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy 和 destroyed 的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

⑽deactivated(组件未激活时)：实例没有被激活时。

⑾errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

6、虚拟 DOM 原理

虚拟 DOM，其实就是用对象的方式取代真实的 DOM 操作，把真实的 DOM 操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析 HTML 元素，构建一颗 DOM 树，将状态全部保存起来，在内存当中模拟我们真实的 DOM 操作，操作完后又会生成一颗 dom 树，两颗 DOM 树进行比较，根据 diff 算法比较两颗 DOM 树不同的地方，只渲染一次不同的地方。
补充：

diff 算法核心：

① 如何用 vnode 生成一个 dom 的节点

patch 方法 patch(container, vnode)patch(vnode, newVnode)

②vnode 和 newVnode 的对比

③ 修改改变的 dom 节点
replacechildrencreateElement 复制代码

7、双向绑定的原理？数据劫持？

vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。

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

当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时。Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

vue 的数据双向绑定 将 MVVM 作为数据绑定的入口，整合 Observer，Compile 和 Watcher 三者。通过 Observer 来监听自己的 model 的数据变化，通过 Compile 来解析编译模板指令（vue 中是用来解析 {{}}）。最终利用 watcher 搭起 observer 和 Compile 之间的通信桥梁，达到数据变化 —>视图更新；

数据劫持：当我们访问或设置对象的属性的时候，都会触发相对应的函数，然后在这个函数里返回或设置属性的值。我们可以在触发函数的时候动一些手脚做点我们自己想做的事情，这也就是“劫持”操作。

8、Proxy 相比于 defineProperty 的优势

Vue3.0 摒弃了 Object.defineProperty，改为基于 Proxy 的观察者机制探索。

首先说一下 Object.defineProperty 的缺点：

• ①Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实施响应。

• ②Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2.X 里，是通过递归 + 遍历 data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。
  而要取代它的 Proxy 有以下两个优点

• 可以劫持整个对象，并返回一个新对象。

• 有多种劫持操作(13 种)
  补充：

• Proxy 是 ES6 新增的一个属性，翻译过来的意思就是代理，用在这里表示由它来“代理”某些操作。Proxy 让我们能够以简洁易懂的方式控制外部对象的访问，其功能非常类似于设计模式中的代理模式。

• Proxy 可以理解为，在目标对象之前设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

• 使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑(如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等)。从而可以让对象只需要关注核心逻辑，达到关注点分离，降低对象复杂度等目的。

9、watch、computed 和 methods 的区别

• methods 在重新渲染的时候每次都会被重新的调用；

• computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed ；需要知道值的改变后执行业务逻辑，才用 watch。

• watch 也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用 watch。

10、virtual-dom 原理实现(虚拟 dom)

virtual-dom(简称 vdom)的概念大规模的推广还是得益于 react 的出现，virtual-dom 也是 react 这个框架的非常重要的特性之一。相比于频繁的手动去操作 dom 而带来性能问题，vdom 很好的将 dom 做了一层映射关系，进而将在我们本需要直接进行 dom 的一系列操作，映射到了操作 vdom，而 vdom 上定义了关于真实 dom 进行的创建节点，删除节点，添加节点等一系列复杂的 dom 操作，并将这些操作放到 vdom 中进行，这样就通过操作 vdom 来提高直接操作的 dom 的效率和性能。

   在vue的整个应用生命周期当中，每次需要更新视图的时候便会使用vdom，vdom算法是基于**snabbdom**算法所做的修改。

实现：

 ①用js对象构造一个虚拟的dom树，插入到文档中；
 ②状态变更时，记录新树和旧树的差异；
 ③把上面的差异构建到真正的dom中。

12、vue-router

❄ 单页面路由跳转的方式：

   ①hash(哈希默认)模式：使用 URL hash 值来作路由。默认模式。
   ②history(mode:history)模式： 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
   ③abstract模式(严格模式)：支持所有 JavaScript 运行环境，如 Node.js 服务器端。
    根据mode参数来决定采用哪一种方式。

    vue-router的实现原理(核心)：更新视图但不重新请求页面。

❄ vue-router 登陆权限的判断

     vue-router的登陆权限判断主要是在全局钩子函数中进行的，我们在router.js文件中的定义路由里，将需要登陆权限的页面加上meta属性，值是对象的形式，然后在该对象中自定义一个属性，属性值就是一个Boolean值，这时候在main.js文件的全局钩子函数中进行判断，如果需要跳转的页面的自定义属性值为true，那么将进行判断其是否登录，如果没有登录，则告诉用户登录，如果有登录，那么进行页面跳转。

routes:[
{
	path:"/home",
	name:"Home",
	components:Home
	meta:{requireAuth:true}
	}
]

router.beforeEach((to,from,next) => {
	if(to.meta.requireAuth){//判断该路由是否需要登录权限
	if(store.state.token){//通过 vuex 的 state 获取当前的 token 是否存在
	next()
	}else{
	next({
	path:"/one",
	query:{redirect:to.fullPath}//将跳转的路由 path 作为参数，登陆成功后跳转到该路由
	})
}
}else{
	next();
}
})

❄ 路由嵌套

routes:[
{
	path:"/home",
	name:"Home",
	components:Home,
	children:[
	{
	path:"child",
	name:"Child",
	components:"Child"
	}
	]
}
]

13、Vuex 的理解

定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

 **使用场景**：需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。

 **优点**：当你在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。
 Vuex的运行机制：Vuex提供数据（state）来驱动试图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。

 **核心：**

  ①state：定义初始数据。
  ②mutations：更改Vuex的store中的状态的唯一方法是提交mutation
  ③getters：可以对 state 进行计算操作，它就是 store 的计算属性虽然在组件内也可以做计算属性，但是 getters 可以在多给件之间复用如果一个状态只在一个组件内使用，是可以不用 getters。
  ④actions：异步操作初始数据，其实就是调用mutations里面的方法。
  ⑤module：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。





 Vuex的映射：

   state（数据）、getters（计算属性）需要映射在computed实例中，而mutations（同步操作放），actions（异步操作方法）等需要放在methods实例中

computed:{
...mapState([
"list",
])
}
methods:{
...mapMutations([
"changes",
])
}

14、描述下 vue 从初始化页面–>修改数据–>刷新页面 UI 过程？

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

15、Vue 的响应式原理

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

16、Vue.js 的特点

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

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

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

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

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

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

17、插槽的理解

插槽用于决定将所携带的内容，插入到子组件指定的某个位置，但内容必须在父组件中子组件的标签内定义，在子组件中用标签接收。slot 是组件内部的占位符。

18、vue-router 有哪几种导航钩子

① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；
beforeEach（）每次路由进入之前执行的函数。
afterEach（）每次路由进入之后执行的函数。
beforeResolve（）2.5 新增
② 单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。
beforeEnter（）
beforeLeave（）
③ 组件路由钩子：
beforeRouteEnter（）
beforeRouteLeave（）
beforeRouteUpdate（）

19、vue 组件中的 data 为什么是一个函数

data 是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。Object 是引用数据类型，如果不用 function 返回，每个组件的 data 都是内存的同一个地址，一个数据改变了其他也改变了。

20、路由懒加载

使用原因：在单页应用中，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
原理：vue 异步组件技术：异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。

① 第一种：
component:(resolve) => {
require(["@/components/HelloWorld"],resolve);
}

② 第二种：

const info = () => import("@/components/info");复制代码
③ 第三种：
const info = (resolve) => {
import("@/components/info").then(modul => {
resolve(modul);
})
}

④ 第四种：

const info = r => require.ensure([],() => r(
require("@/components/info")
),"info");

21、Vue.js 介绍

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API；Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。数据驱动+组件化的前端开发。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

22、scoped 原理及穿透方法

vue 中的 scoped 通过在 DOM 结构以及 css 样式上加唯一不重复的标记：data-v-hash 的方式，以保证唯一(通过 PostCSS 转译)，达到样式私有模块化的目的。
scoped 的 3 条渲染规则：
① 给 HTML 的 DOM 节点加一个不重复的 data 属性，来表示它的唯一性；
② 在每句 css 选择器末尾（编译后的生成的 css 语句）加一个当前组件的 data 属性选择器来私有化样式；
③ 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上 ddan 当前组件的 data 属性。
补充：

  在做项目中，会遇到这么一个问题，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢？
①不使用scopeds省略（不推荐）；
② 在模板中使用两次style标签。
③scoped穿透：/deep/ >>>

PostCSS：使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和 mixins，转换将来的 css 语法，内联图像等。Autoprefixer 是一种非常流行的 PostCSS 插件。

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

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

24、Vue 中 key 值的作用

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

25、Vue 怎么重置 data

使用 Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data 可以获取到组件初始化状态下的 data。

Object.assign(this.$data, this.$options.data())

26、组件中写 name 选项有什么作用

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

27、route 和 router

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

router 是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

28、Vue 和 React 的区别

监听数据变化的实现原理不同：Vue 通过 getter/setter 以及一些函数的劫持，能精确快速的计算出 vdom 的差异。这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。React 默认是通过比较引用的方式进行的，如果不优化，每当应用的状态被改变时，全部子组件都会重新渲染，可能导致大量不必要的 VDOM 的重新渲染。
数据流的不同：Vue 中默认支持双向绑定，组件与 DOM 之间可以通过 v-model 双向绑定。但是，父子组件之间，props 在 2.x 版本是单向数据流。React 一直提倡的是单向数据流。
模板渲染方式的不同：React 是通过 JSX 渲染模板，而 Vue 是通过一种拓展的 HTML 语法进行渲染

29、首屏加载优化

① 把不常改变的库放到 index.html 中，通过 cdn 引入

然后找到 build/webpack.base.conf.js 文件，在 module.exports = { } 中添加以下代码：

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},

②vue 路由懒加载

③ 不生成 map 文件，找到 config/index.js 文件，修改为 productionSourcceMap：false

④vue 组件尽量不要全局引入

⑤ 使用更轻量级的工具库

⑥ 开启 gzip 压缩：这个优化是两方面的，前端将文件打包成.gz 文件，然后通过 nginx 的配置，让浏览器直接解析.gz 文件。

⑦ 首页单独做服务端渲染：如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。

29、Vue3.0 的了解

大致有三个点，第一个是关于提出的新 API setup()函数，第二个说了对于 Typescript 的支持，最后说了关于替换 Object.defineProperty 为 Proxy 的支持。详细说了下关于 Proxy 代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用 Proxy 又带来了浏览器兼容问题。

30、vue-cli 替我们做了哪些工作

vue-cli 是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。

vue-cli 完成的功能：

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

31、vue 的指令

⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析 html 标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素

⑻v-else：条件渲染指令，必须跟 v-if 成对使用

⑼v-else-if：判断多层条件，必须跟 v-if 成对使用

⑽v-cloak：解决插值闪烁问题

⑾v-once：只渲染元素或组件一次

⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

32、v-for 与 v-if 的优先级

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

33、axios 的拦截

//响应拦截
axios.interceptors.response.use(function(response){
//对响应数据做点什么
return response.data
},function(error){
//对错误响应做点什么
return Promise.reject(error)
})

//请求拦截
axios.interceptors.request.use(function(config){
//在发送请求之前做些什么
return config
},function(error){
//对请求错误做些什么
return Promise.reject(error)
})

34、vue 怎么兼容 IE

使用 babel-polyfill 插件

35、$set 是干嘛用的

<template>
<h1>{{arr}}</h1>
<button @click="change()">点击</button>
</template>

<script>
export default {
    data(){
        return {
            arr:[1,2,3]
        }
    },
    methods:{
        change(){
            this.arr[1]=0;
            console.log(this.arr);  //[1,0,3]
        }
    }
}
</script>

上面就是一个典型的例子，当我们点击按钮想要根据数组 arr 的下标改变其元素的时候，你会发现 data 中的数据改变了，但是页面中的数据并没有改变。这时候就需要$set 出场了。

change(){
this.$set(this.list,1,0);
}

改变/添加 对象属性的时候:this.$set(data 实例,"属性名(添加的属性名)","属性值(添加的属性值)")
改变/添加 数组属性的时候:this.\$set(data 实例,数组下标,"改变后的元素(添加的元素)")复制代码

原因：

   vue在创建实例的时候把data深度遍历所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。让 Vue 追踪依赖，在属性被访问和修改时通知变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

当你在对象上新加了一个属性 newProperty,当前新加的这个属性并没有加入 vue 检测数据更新的机制(因为是在初始化之后添加的),vue.$set 是能让 vue 知道你添加了属性, 它会给你做处理。

36、vue 中"dependencies"，"devDependencies"是什么？