共计 5300 个字符，预计需要花费 14 分钟才能阅读完成。
1. 什么是 vue 生命周期？答：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。它的生命周期中有多个事件钩子，让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑。
2.Vue 生命周期总共有几个阶段？它可以总共分为 8 个阶段：创建前 / 后, 载入前 / 后, 更新前 / 后, 销毁前 / 销毁后。创建前 / 后：在 beforeCreated 阶段，vue 实例的挂载元素 $el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段，vue 实例的数据对象 data 有了，$el 还没有。载入前 / 后：在 beforeMount 阶段，vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段，vue 实例挂载完成，data.message 成功渲染。更新前 / 后：当 data 变化时，会触发 beforeUpdate 和 updated 方法。销毁前 / 后：在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定，但是 dom 结构依然存在。
3. 第一次页面加载会触发哪几个钩子？答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
4.Vue 的双向数据绑定原理是什么？答：vue.js 是采用数据劫持结合发布者 - 订阅者模式的方式，通过 Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体步骤：第一步：需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter 这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化第二步：compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图第三步：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:1、在自身实例化时往属性订阅器 (dep) 里面添加自己 2、自身必须有一个 update()方法 3、待属性变动 dep.notice()通知时，能调用自身的 update()方法，并触发 Compile 中绑定的回调，则功成身退。第四步：MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。
5.axios 的特点有哪些？答：一、Axios 是一个基于 promise 的 HTTP 库，支持 promise 所有的 API 二、它可以拦截请求和响应三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类型的数据四、安全性更高，客户端支持防御 XSRF
6. 对于 MVVM 的理解？MVVM 是 Model-View-ViewModel 的缩写。Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑。View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步 View 和 Model 的对象，连接 Model 和 View。在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
7.Vue 组件间的参数传递 1. 父组件与子组件传值父组件传给子组件：子组件通过 props 方法接受数据; 子组件传给父组件：$emit 方法传递参数 2. 非父子组件间的数据传递，兄弟组件传值 eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适。（虽然也有不少人推荐直接用 VUEX，具体来说看需求咯。技术只是手段，目的达到才是王道。）
8.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 依赖的页面。”
9.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。
10.vue 路由的钩子函数首页可以控制导航跳转，beforeEach，afterEach 等，一般用于页面 title 的修改。一些需要登录才能调整页面的重定向功能。
beforeEach 主要有 3 个参数 to，from，next：to：route 即将进入的目标路由对象，from：route 当前导航正要离开的路由 next：function 一定要调用该方法 resolve 这个钩子。执行效果依赖 next 方法的调用参数。可以控制网页的跳转。
11.vuex 是什么？怎么使用？哪种功能场景使用它？只用来读取的状态集中放在 store 中；改变状态的方式是提交 mutations，这是个同步的事物；异步逻辑应该封装在 action 中。在 main.js 引入 store，注入。新建了一个目录 store，….. export。场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车 stateVuex 使用单一状态树, 即每个应用将仅仅包含一个 store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。mutationsmutations 定义的方法动态修改 Vuex 的 store 中的状态或数据。getters 类似 vue 的计算属性，主要用来过滤一些数据。actionactions 可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。modules 项目特别复杂的时候，可以让每一个模块拥有自己的 state、mutation、action、getters, 使得结构非常清晰，方便管理。
12.vue 中 key 值的作用？答：当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。
13.$route 和 $router 的区别答：$route 是“路由信息对象”，包括 path，params，hash，query，fullPath，matched，name 等路由信息参数。而 $router 是“路由实例”对象包括了路由的跳转方法，钩子函数等。
14. 什么是 vue 的计算属性？答：在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。好处：①使得数据处理结构清晰；②依赖于数据，数据更新，处理结果自动更新；③计算属性内部 this 指向 vm 实例；④在 template 调用时，直接写计算属性名即可；⑤常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；⑥相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。
15. 什么是 MVC？MVC 允许在不改变视图的情况下改变视图对用户输入的响应方式，用户把对 View 的操作交给了 Controller 处理，在 Controller 中响应 View 的事件调用 Model 的接口对数据进行操作，一旦 Model 发生变化便通知相关视图进行更新。如果前端没有框架，只使用原生的 html+js，MVC 模式可以这样理解。将 html 看成 view;js 看成 controller，负责处理用户与应用的交互，响应对 view 的操作（对事件的监听），调用 Model 对数据进行操作，完成 model 与 view 的同步（根据 model 的改变，通过选择器对 view 进行操作）; 将 js 的 ajax 当做 Model，也就是数据层，通过 ajax 从服务器获取数据。
16.MVVM 与 MVC 区别？MVVM 与 MVC 两者之间最大的区别就是：MVVM 实现了对 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素来改变 View 的变化，而是改变其属性后，该属性对应的 View 层数据会自动改变。以 Vue 为例：
<div id=”vueDemo”>
<p>{{title}}</p>
<button v-on:click=”clickEvent”>hello word</button>
</div>
var vueDemo = new Vue({
el: ‘#vueDemo’,
data: {
title: ‘Hello Vue!’
},
methods: {
clickEvent: function () {
this.title = “hello word!”
}
}
})
复制代码这里的 html => View 层，可以看到这里的 View 通过模板语法来声明式的将数据渲染进 DOM 元素，当 ViewModel 对 Model 进行更新时，通过数据绑定更新到 View。Vue 实例中的 data 相当于 Model 层，而 ViewModel 层的核心是 Vue 中的双向数据绑定，当 Model 发生变化时 View 也可以跟着实时更新，同理，View 变化也能让 Model 发生变化。总的看来，MVVM 比 MVC 精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作 DOM 元素。因为在 MVVM 中，View 不知道 Model 的存在，Model 和 ViewModel 也观察不到 View，这种低耦合模式提高代码的可重用性。
