vue常见面试题

---

vue面试题

***1. 什么是MVVM?

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

2. mvvm 和mvc 的区别？它和其他框架（JQuery）的区别是什么？哪些场景适合？

mvc 和 mvvm 其实区别不大。都是一种设计思想，主要 mvc 中 controller 演变成 mvvm 中的
ViewModel。
mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验
区别：vue 数据驱动，通过数据来显示视图层而不是节点操作
场景：数据操作比较多的场景，更加便捷

3. Vue 的优点是什么？

低耦合：视图 View 可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同给的“view”
上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性：你可以把一些视图逻辑放在ViewModel 里面，让很多 view 重用这段视图逻辑
独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）， 设计人员可以专注于页
面设计
可测试：界面素来是比较难测试的，而现在测试可以针对 ViewModel 来写

4. Vue.js 的两个核心是什么?

数据驱动、组件系统

5. Vue 组件之间的传值

父组件与子组件传值
父组件通过标签上定义传值(:父组件名称=”子组件 props 的名称”) 子组件通过 props 的方式接受数
据
子组件向父组件传递数据
子组件通过$emit 方法传递参数给父组件

6. Vue-cli 中怎么使用自定义组件，又遇到过哪些问题吗?

在components 文件中创建组件.vue 文件.是script 中export default{}
在调用的页面中使用 import XXX from 路径
在调用的组建 components 属性中注册组件，注意大小写（文档不接受连字符，可以使用驼峰命
名）

7. Vue 如何实现按需加载配合webpack 设置

webpack 中提供了 require ensure（）来实现按需加载。以前引入路由是通过 import 这样的方式引
入，现在改为 const 定义的方式他引入。
不进行页面按需加载引入方式：import home from ‘…/XXX’
进行页面按需加载的引入方式：const home = ‘…/XXX’

8. v-show 和v-if 指令的共同点和不同点

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

9. 如何让CSS 只在当前组件中起作用

在当前文档中使用 style 标签，并添加 scope 属性

10. 的作用是什么？

keep-alive 标签包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染

11. 聊聊Keep-alive 的实现原理和缓存策略

原理：
keep-alive 的实现正是用到了 LRU 策略, 将最近访问的组件 push 到 this.keys 最后面, this,keys[0] 也就
是最久没有被访问到的组件, 当缓存实例超过 max 设置值, 删除this.keys[0]
LRU 缓存淘汰算法: LRU 算法根据数据的历史访问记录来进行记录, 其核心思想是”如果数据最近被访问
过, 那么将来被访问的几率也更高”。

12. Vue 中引入组件的步骤

采用 ES6 的import…from…语法或CommonJS 的require()方法引入组件
对组件进行注册
使用组件

13. Vue 常用的修饰符？

.precent：提交事件不在重载页面
.stop： 组织但即使单击事件冒泡
.self：当事件发生在该元素本身而不是子元素的时候会触发
.capture: 事件侦听, 事件发生的时候会调用

14. 什么是Vue 的计算属性?

在模板中放入太多的逻辑会让模板过重且难以维护, 在需要对数据进行复杂处理, 且可能多次使用的情况
下, 尽量采用计算属性的方式。
好处：
使得数据处理结构清晰
依赖于数据，数据更新，处理结果自动更新
计算属性内容部 this 指向 vm 实例
在 template 调用时，直接写计算属性名即可
常用的 getter 方法，获取数据，也可以使用 set 方法改变数据
相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但依赖数据不变的时候，
computed 从缓存中获取， 不会重新计算

15. Vue 等单页面应用及其优缺点？

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

A custom component!

’ })

16. 指令v-el 的作用是什么?

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，可以是 CSS 选择器，也可以是一个
HTMLElement 实例

17. 在Vue 中使用插件的步骤

采用ES6 的import…from…语法或CommonJS 的require()方法引入插件使用全局方法 Vue.use(plugin)
使用插件， 可以传图一个选项对象 Vue,use(MyPlugin,{someOption:true })

18. active-class 是哪个组件的属性？

vue-router 模块的 router-link 组件

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

v-if：判断是否为真，然后重组、销毁 DOM 节点
v-for：数据循环
v-bind：class 绑定一个属性
v-model：实现双向绑定
v-on：添加事件
v-else：配合 v-if 使用

20. vue-loader 是什么？使用它的用途有哪些？

解析：vue 文件的一个加载器
用途：js 可以写 es6、style 样式可以 scss、template 可以加等

21. scss 是什么？在 vue-cli 中安装使用步骤？有几大特性？

scss 是 css 的预编译。
使用步骤：
先安装 css-loader、node-loader、scss-loader 等加载器模块
在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展 scss
在同一个文件，配置一个 module 属性
在组件的 style 标签上添加 lang 属性，lang=“scss”
特性：
可以使用变量（$变量名=值）;
可以用混合器
可以嵌套

22. Vue 中的Key 到底有什么用?

Key 是给每一个 vnode 的唯一 id, 依靠 key, 我们 diff 操作可以更准确、更快速（对于简单列表页面渲染
来说 diff 节点也更快，但会产生一些隐藏的副作用， 比如可能不会产生过渡效果，或者在某些节点有绑
定数据（表单）状态，会出现状态错位）
diff 算法的过程中，先会进行新旧节点的首尾交叉对比，当无法匹配的时候会用新节点的 key 与旧节点
进行比对， 从而找到相应的旧节点
更准确: 因为带 Key 就不会出现重复现象, 在 sameNode 函数 a.key === b.key 对比中可以避免就地复用
的情况。所以会更加准确，如果不加 key 会导致之前节点的状态被保留下来，会产生一系列的 bug
更快速：key 的唯一性可以被 Map 数据结构充分利用，相比于遍历查找的时间复杂度 O（n），Map 的
时间复杂度仅仅为 O（1）

23. 谈一谈nextTick 的原理

Vue 的 nextTick 方法的实现原理
Vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
mictask 因为其高优先级特性, 能确保队列中的微任务在一次事件循环前辈执行完毕
考虑兼容问题做了 microtask 向 macrotask 的降级方案
详解:
js 执行是单线程的， 它是基于事件循环的。
主线程的执行过程就是一个tick，而所有的异步结果都是通过“任务队列”来调度。消息队列中存放的是一
个个的任务（task）。规范中的 task 分为两大类， 分别是 macro task 和 micro task，并且每个 macro
task 结束后，都将清空所有micro task。
在浏览器环境中，常见的 macro task 有 setTimeout、MessageChannel、postMessage、
setImmediate
常见的 micro task 有 MutationObsever 和 Promise.then
Vue 在更新 DOM 时是异步执行的，只要侦听到数据变化，Vue 将开启一个队列， 并缓冲在同一事件循
环中发生的所有数据变更。
在 Vue2.5 的 源 码 中 ,macrotask 降 级 的 方 案 依 次 是 : setImmediate 、MessageChannel、
setTimeout

24. 为什么避免 v-if 和v-for 用在一起？

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

25. VNode 是什么？虚拟DOM 是什么？

Vue 在羽绒棉上渲染的节点，及其子节点成为“虚拟节”，简写为“VNode”。 “虚拟 DOM”是由 Vue 组件树简历起来的整个 VNode 树的称呼

26. MINI UI 是什么？怎么使用？说出至少三个组件的使用方法？

基于 vue 前端的组件库。使用 npm 安装，然后 import 样式和 js；
vue.use(miniUi)全局引入。在单个组件局部引入；
import {Toast} form ‘mini-ui’；
组件一: Toast（‘登录成功’）
组件二： mint-header；
组件三：mint-swiper

27. 自定义指定(v-check/v-focus)的方法有哪些？有哪些钩子 函数？还有哪些钩子

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

28. Vue 封装组件的过程

首先，使用 Vue.extend( )创建一个组件
再使用 Vue.component( )方法注册组件
接着,如果子组件需要数据，可以在 props 中接受定义
最后，子组件修改好数据后，想把数据传递给父组件，可以使用 emit（）方法

29. Vue 的双向数据绑定原理是什么？

vue.js 是 才 用 数 据 劫 持 介 个 发 布 - 订 阅 者 模 式 的 方 法 ， 通 过 object.defineProperty() 来劫持
各个属性的 setter 和 getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
observer: Vue 中 使 用 Observer 类 来 管 理 上 述 响 应 式 化 Object.defineProperty 的过程。它的
作用是给对象的属性添加 getter 和setter， 用来依赖收集和派发更新
Dep：用于收集当前响应式对象的依赖关系， 每个响应式对象包括子对象都拥有一个 DEp 实例（里面
subs 是 Watcher 实例数组），当数据有变更时， 会通过 dep.notify（）通知各个 watcher
Watcher: 观察者对象, 实例分为 watch(render watcher), 计算属性 watcher(computed watcher), 侦听
器 watcher(user watcher) 三种

30. Watch 和Dep 的关系

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者, dep 通过 notify 遍历了 dep.subs 通知每个
watcher 更新。
依赖收集
initState 时，对 computed 属性初始化时，触发 computed watcher 依赖收集
initState 时，对侦听属性初始化是，触发 user watcher 依赖收集
render（）的过程， 触发 render watcher 依赖收集
re-render 时，vm.render( )再次执行, 会溢出所有 subs 中的 watcher 的订阅, 重新赋值
派发更新
组件对响应的数据进行了修改, 触发 setter 的逻辑
调用 dep.notify( )
遍历所有的subs( Watcher 实例 ),调用每一个watcher 的update 方法

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

生命周期钩子的一些使用方法：
beforecreate：可以在这加个 loading 事件，在加载实例时触发
created：初始化完成时的时间写在这里，如在这结束 loading 事件，异步请求也适宜在这里调用
mounted：挂载元素，获取到 DOM 节点
updated：如果对数据统一处理，在这里写上相应函数
beforeDestroy：可以做一个确认停止事件的确认框
nextTick：更新数据后立即操作 DOM

32. 打包Vue 项目命令是什么?

npm run build

33. 在Vue 中同时发送多个请求怎么操作？

创建两个 Promise，在 Promise 中使用 axios
调 用 Promise.all([p1,p2]).then( res =>{ }).catch( err => { }) 方 法
举例说明: getInfo(){ //创建 promise,在 promise 中调用 axios , then 里使用 resolve 回调, catch 里使用 reject 回调var p1 = new Promie((resolve,reject) => { this.KaTeX parse error: Expected 'EOF', got '}' at position 90: …ject (err); }) }̲)var p2 = new P…axios.get(httpUrl.getCompany).then(res => { resolve(res); }).catch(err =>{ reject (err);

34. vue 不使用 v-model 的时候怎么监听数据变化

可以使用 watch 监听数据的变化

35. computed 的实现原理

computed 本质是一个惰性求值的观察者
computed 内部实现了一个惰性的 watcher, 也就是 computed watcher, computed watcher 不会立刻
求值, 同时持有一个 dep 实例
其内部通过 this.dirty 属性标记计算属性是否需要重新求值
当 computed 的依赖状态发生改变时, 就会通知这个惰性的 watcher
computed watcher 通过 this.dep.subs.length 判断有没有订阅者，有的话, 会重新计算, 然后对比新旧
值, 如果变化了, 会重新渲染( Vue 想确保不仅仅是计算属性依赖的值发生变化, 而是当计算属性最终计算
的值发生变化时才会触发渲染, watcher 重新渲染, 本质上是一种优化。)
没有的话，仅仅把 this.dirty = true ( 当计算属性依赖于气他数据时, 属性并不会立即重新计算, 只有之后
其它地方需要读取属性的时候, 它才会真正计算, 即具备 lazy( 懒计算 )特性)

36. computed 和 watch 有什么区别及运用场景?

区别:
computed 计算属性: 依赖其它属性值, 并且computed 的值有缓存, 只有它依赖的属性值发生改变, 下一
次获取 computed 的值时才会重新计算computed 的值
watch 侦听器: 更多的是[观察]的作用, 无缓存性, 类似于某些数据的监听回调, 每当监听的数据变化时都
会执行回调进行后续操作
运用场景的那个我们需要进行数值计算, 并且依赖于其他数据时, 应用使用computed, 因为可以利用
computed 的缓存性, 避免每次获取值时, 都要重新计算。
当我们需要的数据变化时执行异步或开销较大的操作时, 应该使用 watch, 使用 watch 选项允许我们执行
异步操作( 访问一个 API ),限制我们执行该操作的频率, 并在我们得到最终结果前, 设置中间状态。这些都
是计算属性无法做到的

37. 为什么在 Vue3.0 才用了 Proxy，抛弃了object.definedProperty？

object.definedProperty 本身有一定的监控到数组下标变化的能力, 但是在 Vue 中, 从性能/体验的性价
比考虑, 尤大大就弃用了这个特性( Vue 为什么不能检测数组变动 ) 为了解决这个问题, 经过 vue 内部处理
后可以使用以下几种方法来监听数组
push/pop/shift/unshift/splice/sort/reverse
}) })//调用 Promise.add().then(res => {}) Promise.all([p1,p2]).then(res => { console.log(res) }) }
由于只针对了以上 7 种方法进行了hack 处理, 所以其他数组的属性也是检测不到的, 还是具有一定的局限
性.
Object.definedProperty 只能劫持对象的属性，因此我么需要对每个对象的每个属性进行遍历。Vue2.0
中通过递归+遍历 data 对象来实现对数据的监控, 如果属性值也是对象 Proxy 可以劫持整个对象, 并返回
一个新的对象.Proxy 不仅可以代理对象, 还可以代理数组。还可以代理动态增加的属性。

38. Vue 是如何对数组方法进行变异的?

Vue 通过原型拦截的方式重写了数学的 7 个方法, 首先获取到这个数组的 ob, 也就是它的 Observer 对 象, 如果有新的值, 就调用 observeArray 对新的值进行监听, 然后手动调用 notify, 通知 render watcher
执行 update。

39. Vue 组件data 为什么必须是函数?

因为组件是可以复用的, JS 里对象是引用关系, 如果组件 data 是一个对象, 那么子组件中的 data 属性值
会互相污染, 产生副作用。
所以一个组件的 data 选项必须是一个函数， 因此每个实例可以维护一份被返回对象的独立拷贝。new
Vue 的实例是不会被复用的，因此不存在以上问题。

40. 说说Vue 的渲染过程

调用 complie 函数, 生成 render 函数字符串, 编译过程如下:
parse 函数解析 template 生成 ast(抽象语法树)
optimize 函数优化静态节点( 标记不需要每次都更新的内容, diff 算法会直接跳过静态节点, 从而减
少比较的过程, 优化了 patch 的过程)
generate 函数生成 render 函数字符串
调用 new Watcher 函数, 监听数据的变化, 当数据发生变化时, render 函数执行生成 vnode 对象
调用patch 方法, 对比新旧vnode 对象, 通过DOM diff 算法添加、修改、删除真正的 DOM 元素

41. Vue 与Angular 以及 React 的区别? 与 AngularJS 的区别:

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

42. vue3.0 今年发布了, 请你说一下他们之间在响应式的实现上有什么区别?

vue2 采用的是 definedProperty 去定义 get,set 来劫持和监听数据, vue3 该用了 proxy, 也代表着 vue
放弃了兼容 ie

43. 像vue-router、vuex 他们都是作为vue 插件，请说一下他们分别都是如何在

vue 中生效的？
通过 vue 的插件系统，用 vue.mixin 混入到全局, 在每个组件的生命周期的某个阶段注入组件实例

44. 请你说一下 Vue 的设计架构

vue2 采用的是典型的混入式架构, 类似于 express 和 jquery, 各部分分模块开发, 再通过一个 mixin 去混
入到最终暴露到全局的类上.

45. Vue 项目优化方式

组件优化 – 提高组件复用性
vue-router 优化 — 使用路由懒加载
v-if 和 v-show/ computed 和 watch 区分使用场景
v-for 遍历必须添加 key 值, 同时避免使用 v-if
事件销毁 — 在声明周期销毁阶段, 销毁一些不必要的数据、定时器等
图片懒加载
第三方插件按需引入
提取公共代码
减少 ES6 转为 ES5 的冗余代码

46. Vue 首屏加载过慢怎么优化?

vue 作为一个单页面应用, 如果不对路由进行处理, 在加载首页的时候, 就会将所有组件全部加载, 并向服
务器请求数据, 这必将拖慢加载速度.
解决方案:
vue-router 懒加载
就是按需加载组件, 只有当路由被访问时才会加载对应组件, 而不是在加载首页的时候就加载, 项目
越大, 对首页加载的速度提升越明显
使用 CDN 加速
在做项目时, 我们会用到很多库,在爱用 CDN 加载可以加快加载速度
gzip 压缩
方法一: 使用 Nginx 反向代理, 配置 nginx.conf 文件
方法二: 使用 node 压缩, 需要使用 compression 库
异步加载组件
服务端渲染
使用 pug/jade/ejs/vue 通过应用框架 Nuxt 等等都可以实现后端渲染, 并且后端渲染还能对 seo 优
化起到作用

47. 生命周期相关面试题

生命总共分为 8 个阶段创建前/后、载入前/后、更新前/后、销毁前/后
创建前/后 :
在 beforeCreate 阶段，vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。
在 created 阶段，vue 实例的数据 data 有了，el 还没有
载入前/后：
在 beforeMount 阶段，vue 实例的$el和data都初始化了,单还没有挂载之前都是虚拟的demo阶段,data.message还未替换.在mounted阶段,vue实例挂载完后,data.message成功渲染.更新前/后：当data变化时,户触发beforeUpdate和update方法。销毁前/后：在执destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经结束了事件监听以及和dom的绑定，但是dom结构依然存在。（1）什么是Vue生命周期？vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM\to 渲染、更新\to 渲染、卸载等一系列过程，我们称这是Vue的生命周期。（2）Vue生命周期的作用是什么？生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程中更容易形成好的逻辑（3）Vue生命周期总共有几个阶段？总共可以分8个阶段：创建前/后、载入前/后、更新前/后、销毁前/后第一次页面加载会触发哪几个钩子?第一次页面加载时会触发beforeCreate、created、beforeMount、mounted这几个钩子（4）请列举出3个Vue常用的声明周期钩子函数created：实例已经创建完成之后调用，在这一步，实例已经完成数据观测、属性和方法的运算，watch、event事件回调，然而，挂载阶段还没有开始，$el 属性目前还不可见
mounted：el 被新创建的 vm.$el替换，并挂载到实例上去之后调用该钩子,如果root实例挂在了一个文档内元素，当mounted被调用时vm.$el 也在文档内。
activated：keep-alive 组件激活时调用
（5）DOM 渲染在那个周期中已完成？
DOM 渲染在 mounted 中就已经完成了

48. Vue-router

（1）Vue-router 的跳转原理:
vue-router 实现单页面路由跳转，提供了三种方式： hash 方式、history 模式、abstract 模式，根据
mode 参数来决定采用哪一种方式
●hash: 使用 URL hash 值来作路由。默认模式。
●history: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
●abstract: 支持所有 JavaScript 运行环境，如 Node.js 服务器端
（2）路由之间的跳转:
声明式（标签跳转）： 标签用于展示路由组件，DOM 节点中使用 v-link 进行跳转，或
使用 router-link 标签
编程式（js 跳转）
（3）怎么定义 vue-router 的动态路由以及如何获取传过来的动态参数？
在 router 目录下的 index.js 文件中，对 path 属性加上/：id 使用 router 对象的 params id
（4）Vue 中,如何用watch 去监听router 变化
当路由发生变化的时候，在 watch 中写具体的业务逻辑
（5）vue-router 有哪几种导航钩子？以及它的参数？
三种，
全局导航钩子：router.beforeEach(to,from,next)，
作用：跳转 前进行判断拦截。
组件内的钩子
单独路由独享组件
beforeRouteEnter、afterEnter、beforeRouterUpdate、beforeRouteL eave
参数：有 to（去的那个路由）、from（离开的路由）、next（一定要用这个函数才能去到下一个路由，
如果不用就拦截）最常用就这几种
（6）Vue 的路由实现: hash 模式和history 模式(Vue 的两种状态)
hash——即地址栏 URL 的#符号，特点：通过 window.onhashchange 的监听, 匹配不同的 url 路
径，进行解析，加载不同的组件，然后动态的渲染出区域内的 html 内容，不会被包含在 HTTP 请
求中,对后端完全没有影响
HashHistory 有两个方法：
HashHistory.push（）是将路由添加到浏览器访问历史的栈顶
hashHistory.replace( ) 是替换掉当前栈顶的路由
因为hash 发生变化的url 都会被浏览器历史访问栈记录下来，这样一来， 尽管浏览器没有请求服务器，
但是页面状态和 url 一一关联起来的，浏览器还是可以进行前进后退的
history —— 利用了 HTML5 History Interface 中新增的 pushState（）和 replaceState（）方
法。这两个方式应用于浏览器的历史记录栈，提供了对历史记录的修改功能。history 模式不怕页
面的前进和后腿，就怕刷新，当刷新时，如果服务器没有相应的响应或者资源，就会刷出 404，而
hash 模式不会
（7）$router和$route 的区别
$route从当前router跳转对象里面可以获取name、path、query、params等（<router-link>传的参数有this.$route.query 或 者 this.$route.params 接收）
$router为VueRouter实例。想要导航到不同URL，则使用$router.push方式，返回上一个
history 也是使用$router.go 方法
let vm = new Vue({ el:"#app", data:{}, router, watch:{ $router(to,from){ console.log(to.path); } } }

49. Vuex:

Vuex 是一个专门为 vue.js 应用设计的状态管理架构，统一管理和维护各个
Vue 组件的可变化状态（可以理解为 Vue 组件中的那些 data） （1）Vuex 的五大属性:
Vuex 有五个核心概念：state、getters、mutations、actions、modules
state => 基本数据
getters => 从基本数据派生的数据
mutations => 提交更改数据的方法，同步!
actions => 像一个装饰器，包裹 mutations，使之可以异步
modules => 模块化 Vuex
（2）不用Vuex 会带来什么问题?
可维性会下降，想修改数据要维护三个地方
可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的；
增加耦合， 大量的上传派发， 会让耦合性大大增加。而 Vue 用 Component 就是为了减少耦合