Vue面试题

51、如何理解 MVVM 原理？

(1) 什么是 MVVM？

随着前端对于控制逻辑的越来越轻量，MVVM 模式作为 MVC 模式的一种补充出现了，万变不离其宗，最终的目的都是将 Model 里的数据展示在 View 视图上，而 MVVM 相比于 MVC 则将前端开发者所要控制的逻辑做到更加符合轻量级的要求。

(2) ViewModel

在 Model 和 View 之间多了叫做 View-Model 的一层，将模型与视图做了一层绑定关系，在理想情况下，数据模型返回什么视图就应该展示什么。在 ViewModel 引入之后，视图完全由接口返回数据驱动，由开发者所控制的逻辑非常轻量。不过这里要说明的是，在 MVVM 模式下，Controller 控制逻辑并非就没了，像操作页面 DOM 响应的逻辑被 SDK（如 Vue 的内部封装实现）统一实现了，像非操作接口返回的数据是因为服务端在数据返回给前端前已经操作好了。

52、Vue 的生命周期

(1) beforeCreate：创建前。在数据观测和初始化事件还未开始前被调用。

(2) created：创建后。完成数据观测、属性和方法的运算、初始化事件，$el 属性还没有显示出来。

(3) beforeMount：载入前。在挂载开始之前被调用，相关的 render 函数首次被调用。实例已完成以下的配置：编译模板，把 data 里面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。

(4) mounted：载入后。在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。

(5) beforeUpdate：更新前。在数据更新之前调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

(6) updated：更新后。在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

(7) beforeDestroy：销毁前。在实例销毁之前调用。实例仍然完全可用。

(8) destroyed：销毁后。在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

53、Vue 的每个生命周期内可以处理的事项？

(1) created：实例创建完成，可以进行一些数据、资源的请求。

(2) mounted：实例载入完成，可以进行一些 DOM 操作。

(3) beforeUpdate：可以进一步地更新状态，不会触发附加的重渲染过程。

(4) updated：可以执行依赖于 Dom 的操作，但在大多数情况下应该避免在此期间更改状态，因为这可能导致更新无限循环，在服务器渲染器件不被调用。

(5) destroyed：可以执行优化操作，清空定时器，解除绑定事件。

54、v-if 和 v-show 的区别？

(1) v-if 按照条件是否渲染，如果为 false，直接不再渲染 DOM；v-show 是 display 的 block 或 none。

(2) v-if 是惰性的，如果初始时条件为假，则什么也不做，只有条件第一次变为真时才会开始渲染；v-show 无论初始条件是什么，都会被渲染。

(3) v-if 有更高的切换开销，v-show 有更高的初始渲染开销。因此，需要频繁切换时适合使用 v-show，条件不轻易改变时，适合使用 v-if。

55、为什么 v-for 和 v-if 不能连用？

v-for 会比 v-if 的优先级高一些，如果连用的话，会导致每循环一次就会去 v-if 判断一次，而 v-if 是通过创建和销毁 DOM 元素来控制元素的显示与隐藏，所以就会不停地去创建和销毁元素，造成页面卡顿，性能下降。

56、父组件与子组件间如何互相传值？

(1) 父组件传给子组件：子组件通过 props 方法接收数据。

(2) 子组件传给父组件：$emit 方法传递参数。

57、vue 常用的修饰符？

(1) .prevent：提交事件不再重载页面；

(2) .stop：阻止单击事件冒泡；

(3) .self：当事件发生在该元素本身而不是子元素的时候会触发；

(4) .capture：事件侦听，事件发生的时候会调用。

58、Vue 中 key 值的作用？

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

59、什么是 Vue 的计算属性？

在模板中放入太多的逻辑会让模板过重且难以维护，在需要对数据进行复杂处理，且可能多次使用的情况下，尽量采取计算属性的方式。

好处：

(1) 使得数据处理结构清晰；

(2) 依赖于数据，数据更新，处理结果自动更新；

(3) 计算属性内部 this 指向 vm 实例；

(4) 在 template 调用时，直接写计算属性名即可；

(5) 常用的是 getter 方法，获取数据，也可以使用 set 方法改变数据；

(6) 相较于 methods，不管依赖的数据变不变，methods 都会重新计算，但是依赖数据不变的时候 computed 从缓存中获取，不会重新计算。

60、分别简述 computed 和 watch 的使用场景？

(1) computed：当一个属性受多个属性影响的时候就需要用到 computed。最典型的例子：购物车商品结算的时候。

(2) watch：当一条数据影响多条数据的时候就需要用 watch。例子：搜索数据。

61、vue 组件中 data 为什么必须是一个函数？

组件中的 data 写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的 data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据， 不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个 data，这样改一个全都改了。

62、$nextTick 的使用？

当你修改了 data 的值然后马上获取这个 dom 元素的值，是不能获取到更新后的值，你需要使用 $nextTick 这个回调，让修改后的 data 值渲染更新到 dom 元素之后再获取，才能成功。

63、Vue-router 的全局导航钩子函数？

(1) beforeEach：在路由切换开始时调用。

(2) afterEach：在每次路由切换成功进入激活阶段时被调用。

64、Vuex 是什么？怎么使用？哪种功能场景使用它？

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

Vuex 的应用场景有：组件之间的状态、音乐播放、登录状态、加入购物车等。

Vuex 包含的内容：

(1) state：存放的数据状态，不可以直接修改里面的数据。

(2) mutations：定义方法来动态修改 Vuex 的 store 中的状态或数据。

(3) getters：类似 Vue 的计算属性，主要用来过滤一些数据。

(4) action：可以理解为通过将 mutations 里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。view 层通过 store.dispath 来分发 action。

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

65、Vue 响应式数据原理？

(1) 核心点：Object.defineProperty。默认 Vue 在初始化数据时，会给 data 中的属性使用 Object.defineProperty 重新定义所有属性。当页面取到对应属性时，会进行依赖收集（收集当前组件中的 watcher），如果属性发生变化会通知相关依赖进行更新操作。

(2) 原理：Vue 初始化时会调用 initData，initData 会获取当前用户传入的数据，并创建一个观测类 Observer 对数据进行观测，数据如果为对象类型，则会调用 this.walk(value) 方法，将数据遍历并使用 Object.definePreperty 方法重新定义。拦截属性的获取，进行依赖拦截属性的更新，对相关依赖进行通知。

66、Vue 中如何检测数组变化？

(1) 使用函数劫持方式，重写数组方法。

(2) Vue 将 data 中的数组进行了原型链重写，指向了自己定义的数组原型方法，这样当调用数组 api 时，可以通知依赖更新，如果数组中包含引用类型，会对数组中的引用类型再次进行监控。

67、为何 Vue 采用异步渲染？

Vue 是组件级更新，如果不采用异步更新，每次更新数据都会对当前组件进行重新渲染。所以为了性能考虑，Vue 会在本轮数据更新后，再去异步更新视图。

68、nextTick 及其实现原理？

nextTick 方法主要时使用了宏任务和微任务，定义了一个异步方法。多次调用 nextTick 会将方法存入队列中，通过这个异步方法清空当前队列。所以这个 nextTick 方法就是异步方法。

实现原理：

(1) nextTick (cb)：调用 nextTick 传入 cb。

(2) callbacks.push (cb)：将回调函数存入数组中。

(3) timerFunc ()：分别尝试采用 Promise 回调、MutationObserver 回调、setimmediat 回调、setTimeout 回调，执行 nextTick 中传入的方法（flushCallbacks）。

(4) 支持 Promise 写法的会返回 Promise。

69、简述一下 Vue 中 Computed 的特点。

默认 computed 也是一个 watcher，是具备缓存的，只有当依赖的属性发生变化时才会更新视图。

computed 的核心是做了一个 dirty 实现缓存的机制，当依赖的数据发生变化，会让计算属性的 watcher 的 dirty 变成 true。

70、Watch 中的 deep: true 是如何实现的？

当用户指定了 watch 中的 deep 属性为 true 时，如果当前监控的值是数组类型，会对对象中的每一项进行求值，此时会将当前 watcher 存入到对应属性的依赖中，这样数组中对象发生变化时也会通知数组更新。

71、Ajax 请求放在哪个生命周期中？

(1) 在 created 的时候，视图中的 dom 并没有被渲染出来，所以此时如果直接去操作 dom 节点，无法找到相关的元素。

(2) 在 mounted 中，由于此时 dom 已经渲染出来了，所以可以直接操作 dom 节点。一般情况下都放到 mounted 中，保证逻辑的统一性，因为生命周期是同步执行的，ajax 是异步执行的。

(3) 服务器渲染不支持 mounted 方法，所以在服务端渲染的情况下统一放到 created 中。

72、何时需要使用 beforeDestroy？

(1) 可能在当前页面中使用了 $on 方法，那就需要在组件销毁前解绑。

(2) 清除自己定义的计时器。

(3) 解除事件的绑定，如：scroll、mousemove 等。

73、Vue 中模版编译的原理？

export const createCompiler = createCompilerCreator(function baseCompile(
  template: string,
  options: CompilerOptions
): CompiledResult {
  // 把 template 字符串转化成 ast 抽象语法树
  const ast = parse(template.trim(), options);
  // 优化 ast 抽象语法树
  if (options.optimize !== false) {
    optimize(ast, options);
  }
  // 将抽象语法树生成字符串形式的 js 代码
  const code = generate(ast, options);
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns,
  };
});
// 最后将生成的函数字符串转为 render 函数
const render = new Function(code);

可以看到，编译的主要过程为 4 步：

(1) 将 template 字符串转化成 ast 抽象语法树；

(2) 优化 ast 抽象语法树；

(3) 将抽象语法树生成字符串形式的 js 代码；

(4) 最后将生成的函数字符串转为 render 函数。

74、Vue 的全局 API？

(1) Vue.component()：注册或获取全局组件。注册还会自动使用给定的 id 设置组件的名称。

(2) Vue.directive()：注册或获取全局指令。

(3) Vue.filter()：注册或获取全局过滤器（如设置日期时间的格式化）。

(4) Vue.use()：声明并使用插件。

(5) Vue.nextTick(callback)：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新之后的 DOM。

(6) Vue.set()：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

(7) Vue.delete()：删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到 property 被删除的限制，但是你应该很少会使用它。

(8) Vue.mixin()：全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。

75、Vue 实例的配置选项？

(1) data：组件中使用的 data 函数的形式，目的是为了实现数据的响应式；组件中使用 data 对象的写法是无法实现真正的数据响应式的。

(2) props：接收父级组件传递进来的数据（属性或者方法），实现父子组件之间的通信。

(3) computed：计算属性，在组件中某个数据发生变化，相关联的数据会自动的变化，也是响应式的数据。

(4) methods：用来定义方法，在定义的方法中，this 指向 Vue 实例本身。

(5) watch：状态监听功能，只需监听当前 Vue 实例中的数据变化，就会调用当前数据所绑定的事件处理方法。

(6) filters：在插值表达式中可以使用过滤器 {{data | filter}}（| 称为管道符，管道符之前代码执行的结果会传到后面作为参数进行处理）；在 v-bind 属性绑定中可以使用过滤器（用于属性绑定）。

76、computed 和 watch 的区别？

(1) computed：计算属性。组件加载的时候，计算属性会自动的执行。

(2) watch：监视。组件加载的时候默认是不执行，除非数据发生了变化才会执行。如果监视默认执行，需要进行配置。

77、Vue 的实例属性有哪些？

(1) $parent：父级实例，如果当前实例有的话。

(2) $children：当前实例的所有直接子组件。

(3) $data：Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象 property 的访问。

(4) $options：用于当前 Vue 实例的初始化选项。需要在选项中包含自定义 property 时会有用处。

(5) $slots：用来访问被插槽分发的内容。

(6) $refs：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。

(7) $attrs：包含了父作用域中不作为 prop 被识别（且获取）的 attribute 绑定（class 和 style 除外）。

(8) $listeners：包含了父作用域中的（不含 .native 修饰器的）v-on 事件监听器。

78、Vue 的实例方法有哪些？

Vue 实例方法可以分为：数据、事件、生命周期。

(1) 数据类：

$set(object,key,value)：为对象 object 添加属性 key，并指定属性值 value。

$delete(object,key)：删除对象 object 的属性 key。

$watch(data,callback[,options])：侦听的数据 data，回调函数，可选项。

(2) 事件类：

$on(event,callback)：绑定事件。

$once(event,callback)：绑定一次事件。

$off()：解绑事件。

$emit()：分发事件。

(3) 生命周期类：

$mount([elementOrSelector])：手动挂载 Vue 实例。

$forceUpdate()：迫使 Vue 实例重新渲染。

$nextTick([callback])：将回调延迟到下次 DOM 更新循环之后执行。

$destory()：销毁 Vue 实例。

79、列出 Vue 中常用的指令。

(1) v-text：标签中间的显示文本，相当于 DOM 中的 innerText。

(2) v-html：标签中间的显示内容，相当于 DOM 中的 innerHTML。

(3) v-show：设置标签内容显示或者隐藏，操作的是 css 中的 display。

(4) v-if：设置标签显示或者隐藏，在 DOM 树中是否存在标签。

(5) v-else

(6) v-else-if

(7) v-for：遍历数据。

(8) v-on：绑定事件。

(9) v-once

(10) v-bind：强制数据绑定。

(11) v-model：双向数据绑定。

(12) v-slot：插槽（包括普通插槽、具名插槽、作用域插槽）。

80、Vue 组件间多种通信方式。

(1) 常用的父子组件通讯方式：props、$emit。

(2) 通过 $parent、$children 来访问组件实例，进而去获取或者改变父子组件的值。(不推荐使用)

(3) $ref：通过引用的方式获取子节点，常用于父组件中调用子组件的方法或者获取子组件的属性。

(4) provide、inject：依赖注入，常见于插件或者组件库里。多个组件嵌套时，顶层组件 provide 提供变量，后代组件都可以通过 inject 来注入变量。

(5) EventBus：事件总线。任意两个组件通讯。

(6) $attrs、$listener：适用于多级组件嵌套，但是不做中间处理的情况。比如祖先组件向孙子组件传递数据。

(7) Vuex：状态管理器。集中式存储管理所有组件的状态。

(8) localStorage/sessionStorage：持久化存储。

81、vuex 中的状态数据的响应式原理？

(1) 创建了一个 vm 对象。

(2) State 中的数据都是 vm 的 data 数据（是响应式的）。

(3) 组件中读取的 state 数据本质读取的就是 data 中的数据。

(4) 一旦更新了 state 中的数据，所有用到这个数据的组件就会自动更新。

82、如何避免页面刷新后 vuex 数据丢失问题？

(1) 绑定事件监听：在卸载前保存当前数据。

(2) 在初始时读取保存数据作为状态的初始值。

83、跳转 / 导航路由的两种基本方式？

(1) 声明式路由：<router-link to='/xxx' replace>xxx</router-link> 或者 a 标签。

(2) 编程式路由：this.$router.push(location) 或者 replace 的方式。

84、history 与 hash 路由的区别和原理？

区别：

(1) history：路由路径不带 #，刷新会携带路由路径，默认会出 404 问题，需要配置返回首页。

(2) hash：路由路径带 #，刷新不会携带路由路径，请求的总是根路径（返回首页），没有 404 问题。

原理：

(1) history：内部利用的是 history 对象的 pushState () 和 replaceState ()（H5 新语法）。

(2) hash：内部利用的是 location 对象的 hash 语法。

85、谈谈你对 keep-alive 的了解？

(1) keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，防止重复渲染 DOM。

(2) keep-alive 是一个抽象组件，不会在 DOM 树中渲染。

(3) 使用时会多出两个生命周期：activated 和 deactivated。

86、你知道 vue 中 key 的作用和工作原理吗？说说你对它的理解。

(1) key 的作用主要是为了高效地更新虚拟 DOM，其原理是 vue 在 patch 过程中通过 key 可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个 patch 过程更加高效，减少 DOM 操作量，提高性能。

(2) 另外，若不设置 key，还可能在列表更新时引发一些隐蔽的 bug。

(3) vue 中在使用相同标签名元素的过渡切换时，也会使用到 key 属性，其目的也是为了让 vue 可以区分它们，否则 vue 只会替换其内部属性而不会触发过渡效果。

87、谈一谈你对 vue 组件化的理解？

(1) 组件是独立和可复用的代码组织单元。组件系统是 Vue 核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用。

(2) 组件化开发能大幅提高应用开发效率、测试性、复用性等。

(3) 组件使用按分类有：页面组件、业务组件、通用组件。

(4) vue 的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于 VueComponent，扩展于 Vue。

(5) vue 中常见组件化技术有：属性 prop、自定义事件、插槽等，它们主要用于组件通信、扩展等。

(6) 合理的划分组件，有助于提升应用性能。

(8) 组件应该是高内聚、低耦合的。

(9) 遵循单向数据流的原则。

88、谈一谈对 vue 设计原则的理解？

(1) 易用性。vue 提供数据响应式、声明式模板语法和基于配置的组件系统等核心特性。这些使我们只需要关注应用的核心业务即可，只要会写 js、htmI 和 css 就能轻松编写 vue 应用。

(2) 灵活性。渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要 vue 核心特性即可完成功能；随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli 等库和工具，不管是应用体积还是学习难度都是一个逐渐增加的平和曲线。

(3) 高效性。超快的虚拟 DOM 和 diff 算法使我们的应用拥有最佳的性能表现。

追求高效的过程还在继续，vue3 中引入 Proxy 对数据响应式改进以及编译器中对于静态内容编译的改进都会让 vue 更加高效。

89、谈谈你对 MVC、MVP 和 MVVM 区别的理解？

这三者都是框架模式，它们设计的目标都是为了解决 Model 和 View 的耦合问题。

MVC 模式出现较早，主要应用在后端，如 Spring MVC、ASP.NET MVC 等，在前端领域的早期也有应用，如 Backbone.js。它的优点是分层清晰，缺点是数据流混乱、灵活性带来的维护性问题。

MVP 模式是 MVC 的进化形式，Presenter 作为中间层负责 MV 通信， 解决了两者耦合问题，但 P 层过于臃肿会导致维护问题。

MVVM 模式在前端领域有广泛应用，它不仅解决 MV 耦合问题，还同时解决了维护两者映射关系的大量繁杂代码和 DOM 操作代码，在提高开发效率、可读性同时还保持了优越的性能表现。

90、谈谈 vuex 的使用及其理解？

vuex 实现了一个单向数据流，在全局拥有一个 State 存放数据，当组件要更改 State 中的数据时，必须通过 Mutation 提交修改信息，Mutation 同时提供了订阅者模式供外部插件调用获取 State 数据的更新。

而当所有异步操作（常见于调用后端接口异步获取更新数据）或批量的同步操作需要走 Action，但 Action 也是无法直接修改 State 的，还是需要通过 Mutation 来修改 State 的数据。最后，根据 State 的变化，渲染到视图上。

91、vue-router 中导航钩子函数有哪些？

全局的钩子函数：

(1) beforeEach(to, from, next)：路由改变前调用。

to：即将要进入的目标路由对象；

from：当前正要离开的路由对象；

next：路由控制函数，具体的执行效果依赖 next 方法调用的参数。

(2) afterEach(to, from)：路由改变后调用。

单个路由独享钩子函数：

(1) beforeEnter(to, from, next)：在路由配置上直接定义。

组件内的钩子函数：

(1) beforeRouteEnter(to, from, next)：在渲染该组件的对应路由被 confirm 前调用。

(2) beforeRouteUpdate(to, from, next)：在当前路由改变，但该组件被复用时调用。

(3) beforeRouteLeave(to, from ,next)：当导航离开该组件的对应路由时被调用。

92、什么是递归组件？

概念：组件是可以在它们自己的模板中调用自身的。

递归组件，一定要有一个结束的条件，否则就会使组件循环引用，最终出现错误，我们可以使用 v-if=”false” 作为递归组件的结束条件。当遇到 v-if 为 false 时，组件将不会再进行演染。

93、你了解哪些 vue 性能优化的方式？

(1) 路由懒加载。Vue 是单页面应用，可能会有很多的路由引入，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就要更加高效了。

(2) 图片懒加载。对于图片过多的页面，为了加速页面加载速度，很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。

(3) keep-alive。对其包裹的组件进行状态的缓存，使其不被销毁，避免重新渲染。

(4) 区分使用 v-if 和 v-show。

(5) 区分使用 computed 和 watch。

(6) v-for 遍历必须为 item 添加 key，且避免同时使用 v-if。

(7) 事件的销毁。

(8) 按需引入第三方组件。

(9) 长列表性能优化。

(10) 子组件分隔。

94、你对 Vue3.0 的新特性有没有了解？

(1) 更快：虚拟 DOM 重写；优化 slots 的生成；静态树提升；基于 Proxy 的响应式系统。

(2) 更小：通过摇树优化核心库体积。

(3) 更容易维护：TypeScript + 模块化。

(4) 更加友好。

(5) 跨平台：编辑器核心和运行时核心与平台无关，使得 vue 更容易与任何平台（Web、Android、IOS）一起使用。

95、vue-router 的工作原理？

(1) URL 改变；

(2) 触发监听事件；

(3) 改变 vue-router 里面的 current 变量；

(4) 监视 current 变量；

(5) 获取对应的组件；

(6) Render 新组件。

96、install 在 Vuex & Vue-Router 中的处理？

Vue-Router 其实是在 install 函数里面使用了一个全局混入，在 beforeCreate 这个生命周期触发的时候把this.$options.router挂载到 Vue 的原型上，这样我们就可以使用 this.$router 来调用 router 实例。

Router.install = function(_Vue) {
    _Vue.mixin({
        beforeCreate() {
            if (this.$options.router) {
                _Vue.prototype.$router = this.$options.router
            }
        }
    })
}                                                         
export default Router;

_Vue.mixin 全局混入，相当于所有组件中混入这个方法；beforeCreate 是 Vue 的一个生命周期，在 create 之前执行。

97、服务端和客户端渲染的区别？

(1) 二者本质的区别：是谁来完成了 html 的完整拼接。服务端渲染是在服务端生成 DOM 树；客户端渲染是在客户端生成 DOM 树。

(2) 响应速度：服务端渲染会加快页面的响应速度；客户端渲染页面的响应速度慢。

(3) SEO 优化：服务端渲染因为是多个页面，更有利于爬虫爬取信息；客户端渲染不利于 SEO 优化。

(4) 开发效率：服务端渲染逻辑分离的不好，不利于前后端分离，开发效率低；客户端渲染是采用前后端分离的方式开发，效率更高，也是大部分业务采取的渲染方式。

98、Vue 中 mixin 的作用？

多个组件可以共享数据和方法，在使用 mixin 的组件中引入后，mixin 中的方法和属性也就并入到该组件中，可以直接使用。两者的钩子函数都会被调用，mixin 中的钩子首先执行。

99、什么是 vue 路由守卫？

路由守卫就是路由跳转过程中的一些钩子函数，在路由跳转的时候，做一些判断或其它的操作（权限验证）。

100、谈谈你对前端路由的理解？

概念：负责事件监听，根据不同的用户事件，显示不同的页面内容。

本质：用户事件与事件处理函数之间的对于关系。

优点：

(1) 用户体验好，页面初始化后，只需要根据路由变换页面内容，不需要再向服务器发送请求，内容变换速度快。

(2) 可以在浏览器中输入指定想要访问的 url。

(3) 实现了前后端分离，方便开发。