vue 高频面试题合集（三）附答案

为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty？

Object.defineProperty 本身有一定的监控到数组下标变化的能力,但是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性。为了解决这个问题,经过 vue 内部处理后可以使用以下几种方法来监听数组

push();pop();shift();unshift();splice();sort();reverse();复制代码

由于只针对了以上 7 种方法进行了 hack 处理,所以其他数组的属性也是检测不到的,还是具有一定的局限性。

Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。Vue 2.x 里,是通过 递归 + 遍历 data 对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象是才是更好的选择。

Proxy 可以劫持整个对象,并返回一个新的对象。Proxy 不仅可以代理对象,还可以代理数组。还可以代理动态增加的属性。

created 和 mounted 的区别

• created:在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图。

• mounted:在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作。

Vue.js 的 template 编译

简而言之，就是先转化成 AST 树，再得到的 render 函数返回 VNode（Vue 的虚拟 DOM 节点），详细步骤如下：

首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile 是 createCompiler 的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并 option。

然后，AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM 节点，里面有（标签名、子节点、文本等等）

生命周期钩子是如何实现的

Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）

相关代码如下

export function callHook(vm, hook) {  // 依次执行生命周期对应的方法  const handlers = vm.$options[hook];  if (handlers) {    for (let i = 0; i < handlers.length; i++) {      handlers[i].call(vm); //生命周期里面的this指向当前实例    }  }}
// 调用的时候Vue.prototype._init = function (options) {  const vm = this;  vm.$options = mergeOptions(vm.constructor.options, options);  callHook(vm, "beforeCreate"); //初始化数据之前  // 初始化状态  initState(vm);  callHook(vm, "created"); //初始化数据之后  if (vm.$options.el) {    vm.$mount(vm.$options.el);  }};

写过自定义指令吗 原理是什么

指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5. unbind：只调用一次，指令与元素解绑时调用。

Vue 中封装的数组方法有哪些，其如何实现页面更新

在 Vue 中，对响应式处理利用的是 Object.defineProperty 对数据进行拦截，而这个方法并不能监听到数组内部变化，数组长度变化，数组的截取变化等，所以需要对这些操作进行 hack，让 Vue 能监听到其中的变化。 那 Vue 是如何实现让这些数组方法实现元素的实时更新的呢，下面是 Vue 中对这些方法的封装：

// 缓存数组原型const arrayProto = Array.prototype;// 实现 arrayMethods.__proto__ === Array.prototypeexport const arrayMethods = Object.create(arrayProto);// 需要进行功能拓展的方法const methodsToPatch = [  "push",  "pop",  "shift",  "unshift",  "splice",  "sort",  "reverse"];
/** * Intercept mutating methods and emit events */methodsToPatch.forEach(function(method) {  // 缓存原生数组方法  const original = arrayProto[method];  def(arrayMethods, method, function mutator(...args) {    // 执行并缓存原生数组功能    const result = original.apply(this, args);    // 响应式处理    const ob = this.__ob__;    let inserted;    switch (method) {    // push、unshift会新增索引，所以要手动observer      case "push":      case "unshift":        inserted = args;        break;      // splice方法，如果传入了第三个参数，也会有索引加入，也要手动observer。      case "splice":        inserted = args.slice(2);        break;    }    //     if (inserted) ob.observeArray(inserted);// 获取插入的值，并设置响应式监听    // notify change    ob.dep.notify();// 通知依赖更新    // 返回原生数组方法的执行结果    return result;  });});复制代码

简单来说就是，重写了数组中的那些原生方法，首先获取到这个数组的__ob__，也就是它的 Observer 对象，如果有新的值，就调用 observeArray 继续对新的值观察变化（也就是通过target__proto__ == arrayMethods来改变了数组实例的型），然后手动调用 notify，通知渲染 watcher，执行 update。

Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

• Proxy 可以直接监听对象而非属性；

• Proxy 可以直接监听数组的变化；

• Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

• Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

Vue 单页应用与多页应用的区别

概念：

• SPA 单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次 js、css 等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。

• MPA 多页面应用 （MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载 js、css 等相关资源。多页应用跳转，需要整页资源刷新。

Vue 模版编译原理知道吗，能简单说一下吗？

简单说，Vue 的编译过程就是将template转化为render函数的过程。会经历以下阶段：

• 生成 AST 树

• 优化

• codegen

首先解析模版，生成AST语法树(一种用 JavaScript 对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue 的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的 DOM 也不会变化。那么优化过程就是深度遍历 AST 树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

如何在组件中重复使用 Vuex 的 mutation

使用 mapMutations 辅助函数,在组件中这么使用

import { mapMutations } from 'vuex'methods:{    ...mapMutations({        setNumber:'SET_NUMBER',    })}复制代码

然后调用this.setNumber(10)相当调用this.$store.commit('SET_NUMBER',10)

Vue template 到 render 的过程

vue 的模版编译过程主要如下：template -> ast -> render 函数

vue 在模版编译版本的码中会执行 compileToFunctions 将 template 转化为 render 函数：

// 将模板编译为render函数const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this)复制代码

CompileToFunctions 中的主要逻辑如下∶ （1）调用 parse 方法将 template 转化为 ast（抽象语法树）

constast = parse(template.trim(), options)复制代码

• parse 的目标：把 tamplate 转换为 AST 树，它是一种用 JavaScript 对象的形式来描述整个模板。

• 解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的 回调函数，来达到构造 AST 树的目的。

AST 元素节点总共三种类型：type 为 1 表示普通元素、2 为表达式、3 为纯文本

（2）对静态节点做优化

optimize(ast,options)复制代码

这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化

深度遍历 AST，查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的 DOM 永远不会改变，这对运行时模板更新起到了极大的优化作用。

（3）生成代码

const code = generate(ast, options)复制代码

generate 将 ast 抽象语法树编译成 render 字符串并将静态部分放到 staticRenderFns 中，最后通过 new Function(`` render``) 生成 render 函数。

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

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环 tick 中，Vue 刷新队列并执行实际（已去重的）工作。

你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

• v-if 和 v-show 区分使用场景

• computed 和 watch 区分使用场景

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

• 长列表性能优化

• 事件的销毁

• 图片资源懒加载

• 路由懒加载

• 第三方插件的按需引入

• 优化无限列表性能

• 服务端渲染 SSR or 预渲染

（2）Webpack 层面的优化

• Webpack 对图片进行压缩

• 减少 ES6 转为 ES5 的冗余代码

• 提取公共代码

• 模板预编译

• 提取组件的 CSS

• 优化 SourceMap

• 构建结果输出分析

• Vue 项目的编译优化

（3）基础的 Web 技术的优化

• 开启 gzip 压缩

• 浏览器缓存

• CDN 的使用

• 使用 Chrome Performance 查找性能瓶颈

为什么不建议用 index 作为 key?

使用 index 作为 key 和没写基本上没区别，因为不管数组的顺序怎么颠倒，index 都是 0, 1, 2...这样排列，导致 Vue 会复用错误的旧子节点，做很多额外的工作。

Vue-router 路由有哪些模式？

一般有两种模式：（1）hash 模式：后面的 hash 值的变化，浏览器既不会向服务器发出请求，浏览器也不会刷新，每次 hash 值的变化会触发 hashchange 事件。（2）history 模式：利用了 HTML5 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

谈谈 Vue 和 React 组件化的思想

• 1.我们在各个页面开发的时候，会产生很多重复的功能，比如 element 中的 xxxx。像这种纯粹非页面的 UI，便成为我们常用的 UI 组件，最初的前端组件也就仅仅指的是 UI 组件

• 2.随着业务逻辑变得越来多是，我们就想要我们的组件可以处理很多事，这就是我们常说的组件化，这个组件就不是 UI 组件了，而是包具体业务的业务组件

• 3.这种开发思想就是分而治之。最大程度的降低开发难度和维护成本的效果。并且可以多人协作，每个人写不同的组件，最后像撘积木一样的把它构成一个页面

$nextTick 原理及作用

Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout 的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。

nextTick 不仅是 Vue 内部的异步队列的调用方法，同时也允许开发者在实际项目中使用这个方法来满足实际应用中对 DOM 更新数据时机的后续逻辑处理

nextTick 是典型的将底层 JavaScript 执行原理应用到具体案例中的示例，引入异步更新队列机制的原因∶

• 如果是同步更新，则多次对一个或多个属性赋值，会频繁触发 UI/DOM 的渲染，可以减少一些无用渲染

• 同时由于 VirtualDOM 的引入，每一次状态发生变化后，状态变化的信号会发送给组件，组件内部使用 VirtualDOM 进行计算得出需要更新的具体的 DOM 节点，然后对 DOM 进行更新操作，每次更新状态后的渲染过程需要更多的计算，而这种无用功也将浪费更多的性能，所以异步渲染变得更加至关重要

Vue 采用了数据驱动视图的思想，但是在一些情况下，仍然需要操作 DOM。有时候，可能遇到这样的情况，DOM1 的数据发生了变化，而 DOM2 需要从 DOM1 中获取数据，那这时就会发现 DOM2 的视图并没有更新，这时就需要用到了nextTick了。

由于 Vue 的 DOM 操作是异步的，所以，在上面的情况中，就要将 DOM2 获取数据的操作写在$nextTick中。

this.$nextTick(() => {    // 获取数据的操作...})复制代码

所以，在以下情况下，会用到 nextTick：

• 在数据变化后执行的某个操作，而这个操作需要使用随数据变化而变化的 DOM 结构的时候，这个操作就需要方法在nextTick()的回调函数中。

• 在 vue 生命周期中，如果在 created()钩子进行 DOM 操作，也一定要放在nextTick()的回调函数中。

因为在 created()钩子函数中，页面的 DOM 还未渲染，这时候也没办法操作 DOM，所以，此时如果想要操作 DOM，必须将操作的代码放在nextTick()的回调函数中。