Vue面试手册

Vue 是什么

Vue是一个构建用户界面的渐进式 MVVM 框架。它的核心在于数据驱动和组件化的思想。

Vue的优点主要有：

轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；
简单易学：中文文档丰富，易于理解和学习；
双向数据绑定：保留了 Angular 的特点，在数据操作方面更为方便；
组件化：保留了 React 的优点，通过单页面组件实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；
视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；
虚拟DOM：dom 操作是非常耗费性能的，不再使用原生的 dom 操作节点，极大解放 dom 操作；
运行速度更快：相比较于 react 而言，同样是操作虚拟 dom，就性能而言， vue 存在很大的优势。

为什么说Vue是一个渐进式框架

Vue 实现了构建 web 应用最核心的 mvvm 绑定部分，用户可以选择使用其他库（例如vuex、axios、vue-router）来搭配使用构建最适合自己的应用。

v-model 双向绑定的原理是什么

v-model 实际上是语法糖，以 input 元素为例：

1
2
3

<input v-model="inputV" />
// 等同于
<input :value="inputV" @input="inputV = $event.target.value"/>

input 组件的 value 属性绑定于 inputV 变量上，也就是当 inputV 变化时，input 组件的 value 也会跟着变化；
监听 input 事件，该事件在 input 的值改变时触发，事件触发时给 inputV 重新赋值，所赋的值是 $event.target.value，也就是当前触发 input 事件时的 value 值，也就是该 input 组件的值。

Vue 2.0 响应式数据的原理

Vue.js 是采用 数据劫持 结合 发布者-订阅者模式 的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。主要分为以下几个步骤：

对需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter，这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化；
Compile 负责解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图；
Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:
- 在自身实例化时往属性订阅器(dep)里面添加自己
- 自身必须有一个 update() 方法
- 待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调
MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过 Observer 来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化（input） -> 数据（model）变更的双向绑定效果。

vue2_inner

Vue3 中为什么使用 Proxy 来替代 `Object.defineProperty()` 实现数据劫持？

Object.defineProperty 无法监听下标方式修改数组数据或者给对象新增属性的操作，Proxy 可以监听。

Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际（已去重的）工作。

Vue2 监控不了数组类型 data 的变化，有什么解决办法

使用 this.$set(obj，key，value) 更新数组
调用以下几个数组的方法 splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

Vue2 中何时使用 `Vue.$nextTick()`?

在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的 DOM 结构的时候，这个操作就需要方法在 nextTick() 的回调函数中。
在 vue 生命周期中，如果在 created() 钩子进行DOM操作，也一定要放在 nextTick() 的回调函数中。因为在 created() 钩子函数中，页面的DOM还未渲染，这时候没办法操作DOM。

什么是 `Vue.mixin`？

混入（mixin）是指当多个组件共享同样的功能（生命周期hook、方法等）时，将同样的功能剥离开来并在多个组件中引入该部分实现从而代码重用的目的。

vue-router有多少种模式？

hash模式：兼容所有浏览器，包括不支持 HTML5 History Api 的浏览器。例如 https://example.com/#index hash 的值为 #index， hash 的改变会触发 hashchange 事件，我们可以通过监听 hashchange 事件来完成操作实现前端路由。
history模式：能支持 HTML5 History Api 的浏览器，依赖 HTML5 History API 来实现前端路由。例如 https://example.com/index 。为防止服务器请求不到资源时返回 404，需要在服务器端设置，匹配不到资源时返回 index.html ，同时由前端来控制 404 页面的显示。例如，nginx 需配置

location / {
    try_files  $uri $uri/ @router index index.html;
}
location @router {
    rewrite ^.*$ /index.html last;
}

abstract模式：支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式。

hash和history模式实现vue-router跳转api的区别

api	hash	history
push	`window.location.assign`	`window.history.pushState`
replace	`window.location.replace`	window.history.replaceState`
go	`window.history.go`	`window.history.go`
back	`window.history.go(-1)`	`window.history.go(-1)`
forward	`window.history.go(1)`	`window.history.go(1)`

vue 指令有哪些？

v-show、v-if、v-else-if、v-else、v-for、v-on、v-bind、v-model、v-once、v-slot、v-html、v-text