v-for 中 key 的作用

这个是 vue 的一个优化，为了精准高效的更新 dom。

相当于使用 key 给数组某个元素绑定在一起，如果那个 key 对应的数据发生变化，直接更新对应的 dom 就行，不用全部更新一遍。

这也是 vue 不推荐使用数组下标作为 key 的原因。例如数组删除了一个元素，那么这个元素后方元素的下标全都前移了一位，之前 key 对应的数据和 dom 就会乱了，除非重新匹配 key，那就容易产生错误。如果重新匹配 key，等于全部重新渲染一遍，违背了使用 key 来优化更新 dom 的初衷。

简述 vue 的响应式原理

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

vue 的特点

简洁：页面由 HTML 模板 +Json 数据 +Vue 实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量 DOM 更新
模板友好：可通过 npm，bower 等多种方式安装，很容易融入

vue 生命周期的理解？

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

为什么 vue 中 data 必须是一个函数？

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

vue-router 有哪几种导航钩子函数？

三种。
第一种：全局导航钩子 router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
第二种：组件内的钩子；
第三种：单独路由独享组件

vue 路由传参数

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

<keep-alive></keep-alive>的作用是什么？

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

vue 组件通信

父传递子
父：自定义属性名 + 数据（要传递）=> :value=” 数据 ”
子：props [“ 父组件上的自定义属性名“] => 进行数据接收)

子传递父
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
子：this.$emit(‘ 自定义事件名称 ’, 数据) 子组件标签上绑定 @自定义事件名称 =’ 回调函数 ’
父：methods: {自定义事件() {// 逻辑处理} }

兄弟组件
通过中央通信 let bus = new Vue()
A：methods :{函数{bus.$emit(‘ 自定义事件名 ’，数据)} 发送
B：created（）{bus.$on(‘A 发送过来的自定义事件名 ’，函数)} 进行数据接收

axios 的特点有哪些？

1、axios 是一个基于 promise 的 HTTP 库，支持 promise 的所有 API；
2、它可以拦截请求和响应；
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为 json 类型的数据；
4、它安全性更高，客户端支持防御 XSRF；

vue 中的 ref 是什么？

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

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

$route和 $router 的区别？

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

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

数据驱动、组件系统

vue 如何兼容 ie 的问题？

babel-polyfill 插件

vue 改变数组出发视图更新

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

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

DOM 渲染在哪个周期就已经完成？

mounted
注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted

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

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

beforecreate : 可以在这加个 loading 事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到 DOM 节点 updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框

第一次加载会出发哪几个钩子？

会触发 beforeCreate , created ,beforeMount ,mounted

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

1.localStorage 存储到本地再回去
2. 重新获取接口获取数据

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

1. 将公用的 JS 库通过 script 标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
2. 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的 js 文件；
3. 加一个首屏 loading 图，提升用户体验；

计算属性和 watch 的区别？

在我们运用 vue 的时候一定少不了用计算属性 computed 和 watch
computed 计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时，Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大，它可以让你的代码更加声明式、数据驱动并且易于维护。
watch 监听的是你定义的变量, 当你定义的变量的值发生变化时，调用对应的方法。就好在 div 写一个表达式 name，data 里写入 num 和 lastname,firstname, 在 watch 里当 num 的值发生变化时，就会调用 num 的方法，方法里面的形参对应的是 num 的新值和旧值，而计算属性 computed, 计算的是 Name 依赖的值, 它不能计算在 data 中已经定义过的变量。

for…in 和 for…of 的区别

1. for…of 是 ES6 新引入的特性，修复了 ES5 引入的 for…in 的不足
2. for…in 循环出的是 key，for…of 循环出的是 value
3. for…of 不能循环普通的对象，需要通过和 Object.keys()搭配使用
4. 推荐在循环对象属性的时候，使用 for…in, 在遍历数组的时候的时候使用 for…of

谈谈你对 MVVM 开发模式的理解

MVVM 分为 Model、View、ViewModel 三者。
Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
View 代表 UI 视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而 v -if 会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示 / 隐藏时，使用 v -show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v -if 更加合理。

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

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

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

• 将公用的 JS 库通过 script 标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；
• 在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的 js 文件；
• 加一个首屏 loading 图，提升用户体验；

谈谈你对 MVVM 开发模式的理解

MVVM 分为 Model、View、ViewModel 三者。
Model 代表数据模型，数据和业务逻辑都在 Model 层中定义；
View 代表 UI 视图，负责数据的展示；
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新，处理用户交互操作；
Model 和 View 并无直接关联，而是通过 ViewModel 来进行联系的，Model 和 ViewModel 之间有着双向数据绑定的联系。因此当 Model 中的数据改变时会触发 View 层的刷新，View 中由于用户交互操作而改变的数据也会在 Model 中同步。
这种模式实现了 Model 和 View 的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作 dom。

Vue 有哪些指令？

v-html、v-show、v-if、v-for 等等

v-if 和 v-show 有什么区别？

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而 v -if 会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示 / 隐藏时，使用 v -show 会更加节省性能上的开销；当只需要一次显示或隐藏时，使用 v -if 更加合理。

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

vue 实现数据双向绑定主要是：采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty（敌 fai 怕布丁）来劫持各个属性的 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 之间的通信桥梁，达到数据变化 —> 视图更新；视图交互变化（input）—> 数据 model 变更双向绑定效果。

Vue 的生命周期

beforeCreate（创建前）在数据观测和初始化事件还未开始
created（创建后）完成数据观测，属性和方法的运算，初始化事件，el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。
beforeUpdate（更新前）在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
updated（更新后）在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy（销毁前）在实例销毁之前调用。实例仍然完全可用。
destroyed（销毁后）在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
1. 什么是 vue 生命周期？
答：Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。
2.vue 生命周期的作用是什么？
答：它的生命周期中有多个事件钩子，让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑。
3.vue 生命周期总共有几个阶段？
答：它可以总共分为 8 个阶段：创建前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后。
4. 第一次页面加载会触发哪几个钩子？
答：会触发 下面这几个 beforeCreate, created, beforeMount, mounted。
5.DOM 渲染在 哪个周期中就已经完成？
答：DOM 渲染在 mounted 中就已经完成了。

Vue 组件间的参数传递

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

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

vue 路由的钩子函数

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

Vue 与 Angular 以及 React 的区别？

版本在不断更新，以下的区别有可能不是很正确。我工作中只用到 vue，对 angular 和 react 不怎么熟）
1. 与 AngularJS 的区别
相同点：
都支持指令：内置指令和自定义指令；都支持过滤器：内置过滤器和自定义过滤器；都支持双向数据绑定；都不支持低端浏览器。
不同点：
AngularJS 的学习成本高，比如增加了 Dependency Injection 特性，而 Vue.js 本身提供的 API 都比较简单、直观；在性能上，AngularJS 依赖对数据做脏检查，所以 Watcher 越多越慢；Vue.js 使用基于依赖追踪的观察并且使用异步队列更新，所有的数据都是独立触发的。
2. 与 React 的区别
相同点：
React 采用特殊的 JSX 语法，Vue.js 在组件开发中也推崇编写.vue 特殊文件格式，对文件内容都有一些约定，两者都需要编译后使用；中心思想相同：一切都是组件，组件实例之间可以嵌套；都提供合理的钩子函数，可以让开发者定制化地去处理需求；都不内置列数 AJAX，Route 等功能到核心包，而是以插件的方式加载；在组件开发中都支持 mixins 的特性。
不同点：
React 采用的 Virtual DOM 会对渲染出来的结果做脏检查；Vue.js 在模板中提供了指令，过滤器等，可以非常方便，快捷地操作 Virtual DOM。

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

只用来读取的状态集中放在 store（四朵儿）中；改变状态的方式是提交 mutations（米忒寻），这是个同步的事物；异步逻辑应该封装在 action（啊可孙）中。
在 main.js 引入 store，注入。新建了一个目录 store，….. export。
场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

state
Vuex 使用单一状态树, 即每个应用将仅仅包含一个 store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
mutations
mutations 定义的方法动态修改 Vuex 的 store 中的状态或数据。
getters
类似 vue 的计算属性，主要用来过滤一些数据。
action
actions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

const store = new Vuex.Store({//store 实例

  state: {count: 0},
  mutations: {increment (state) {state.count++}
      },
  actions: {increment (context) {context.commit('increment')

}
}
})
modules
项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、getters, 使得结构非常清晰，方便管理。

const moduleA = {
state: {…},
mutations: {…},
actions: {…},
getters: {…}
}
const moduleB = {
state: {…},
mutations: {…},
actions: {…}
}

const store = new Vuex.Store({
modules: {

a: moduleA,
b: moduleB

css 只在当前组件起作用

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

$route 和 $router 的区别

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

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

数据驱动、组件系统

vue 常用的修饰符？

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

v-on 可以绑定多个方法吗？

可以

vue 中 key 值的作用？

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

什么是 vue 的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部 this 指向 vm 实例；④在 template（甜铺累）调用时，直接写计算属性名即可；⑤常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；⑥相较于 methods，不管依赖的数据变不变，methods（咩特饭）都会重新计算，但是依赖数据不变的时候 computed（康票特）从缓存中获取，不会重新计算。watch 监听的是你定义的变量, 当你定义的变量的值发生变化时，调用对应的方法

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

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

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

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

vue 组件中的 data 必须是函数

类比引用数据类型
Object 是引用数据类型, 如果不用 function 返回, 每个组件的 data 都是内存的同一个地址, 一个数据改变了其他也改变了;
javascipt 只有函数构成作用域(注意理解作用域, 只有函数的{} 构成作用域, 对象的 {} 以及 if(){}都不构成作用域)，data 是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立, 不会相互影响