12道vue高频原理面试题,你能答出几道?

前言

本文分享 12 道 vue 高频原理面试题,覆盖了 vue 核心实现原理,其实一个框架的实现原理一篇文章是不可能说完的,但愿经过这 12 道问题,让读者对本身的 Vue 掌握程度有必定的认识(B 数),从而弥补本身的不足,更好的掌握 Vue ❤️前端

1. Vue 响应式原理

核心实现类:

Observer : 它的做用是给对象的属性添加 getter 和 setter，用于依赖收集和派发更新vue

Dep : 用于收集当前响应式对象的依赖关系,每一个响应式对象包括子对象都拥有一个 Dep 实例（里面 subs 是 Watcher 实例数组）,当数据有变动时,会经过 dep.notify()通知各个 watcher。node

Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher（user watcher）三种react

Watcher 和 Dep 的关系

watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 经过 notify 遍历了 dep.subs 通知每一个 watcher 更新。git

依赖收集

initState 时,对 computed 属性初始化时,触发 computed watcher 依赖收集github
initState 时,对侦听属性初始化时,触发 user watcher 依赖收集web
render()的过程,触发 render watcher 依赖收集面试
re-render 时,vm.render()再次执行,会移除全部 subs 中的 watcer 的订阅,从新赋值。算法

派发更新

组件中对响应的数据进行了修改,触发 setter 的逻辑segmentfault
调用 dep.notify()
遍历全部的 subs（Watcher 实例）,调用每个 watcher 的 update 方法。

原理

当建立 Vue 实例时,vue 会遍历 data 选项的属性,利用 Object.defineProperty 为属性添加 getter 和 setter 对数据的读取进行劫持（getter 用来依赖收集,setter 用来派发更新）,而且在内部追踪依赖,在属性被访问和修改时通知变化。

每一个组件实例会有相应的 watcher 实例,会在组件渲染的过程当中记录依赖的全部数据属性（进行依赖收集,还有 computed watcher,user watcher 实例）,以后依赖项被改动时,setter 方法会通知依赖与此 data 的 watcher 实例从新计算（派发更新）,从而使它关联的组件从新渲染。

一句话总结:

vue.js 采用数据劫持结合发布-订阅模式,经过 Object.defineproperty 来劫持各个属性的 setter,getter,在数据变更时发布消息给订阅者,触发响应的监听回调

2. 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（懒计算）特性。)

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

区别

computed 计算属性 : 依赖其它属性值,而且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会从新计算 computed 的值。

watch 侦听器 : 更多的是「观察」的做用,无缓存性,相似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操做。

运用场景

运用场景：

当咱们须要进行数值计算,而且依赖于其它数据时,应该使用 computed,由于能够利用 computed 的缓存特性,避免每次获取值时,都要从新计算。

当咱们须要在数据变化时执行异步或开销较大的操做时,应该使用 watch,使用 watch 选项容许咱们执行异步操做 ( 访问一个 API ),限制咱们执行该操做的频率,并在咱们获得最终结果前,设置中间状态。这些都是计算属性没法作到的。

4. 为何在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty？

Object.defineProperty 自己有必定的监控到数组下标变化的能力,可是在 Vue 中,从性能/体验的性价比考虑,尤大大就弃用了这个特性(Vue 为何不能检测数组变更 )。为了解决这个问题,通过 vue 内部处理后可使用如下几种方法来监听数组

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

因为只针对了以上 7 种方法进行了 hack 处理,因此其余数组的属性也是检测不到的,仍是具备必定的局限性。

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

Proxy 能够劫持整个对象,并返回一个新的对象。Proxy 不只能够代理对象,还能够代理数组。还能够代理动态增长的属性。

5. 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),源码以下:

function createKeyToOldIdx(children, beginIdx, endIdx) {
  let i, key;
  const map = {};
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key;
    if (isDef(key)) map[key] = i;
  }
  return map;
}
复制代码

6. 谈一谈 nextTick 的原理

JS 运行机制

JS 执行是单线程的，它是基于事件循环的。事件循环大体分为如下几个步骤:

全部同步任务都在主线程上执行，造成一个执行栈（execution context stack）。
主线程以外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的全部同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，因而结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而全部的异步结果都是经过 “任务队列” 来调度。消息队列中存放的是一个个的任务（task）。规范中规定 task 分为两大类，分别是 macro task 和 micro task，而且每一个 macro task 结束后，都要清空全部的 micro task。

for (macroTask of macroTaskQueue) {
  // 1. Handle current MACRO-TASK
  handleMacroTask();

  // 2. Handle all MICRO-TASK
  for (microTask of microTaskQueue) {
    handleMicroTask(microTask);
  }
}
复制代码

在浏览器环境中 :

常见的 macro task 有 setTimeout、MessageChannel、postMessage、setImmediate

常见的 micro task 有 MutationObsever 和 Promise.then

异步更新队列

可能你尚未注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的全部数据变动。

若是同一个 watcher 被屡次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免没必要要的计算和 DOM 操做是很是重要的。

而后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工做。

Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，若是执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

在 vue2.5 的源码中，macrotask 降级的方案依次是：setImmediate、MessageChannel、setTimeout

vue 的 nextTick 方法的实现原理:

vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调前后执行
microtask 由于其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕
考虑兼容问题,vue 作了 microtask 向 macrotask 的降级方案

7. vue 是如何对数组方法进行变异的 ?

咱们先来看看源码

const arrayProto = Array.prototype;
export const arrayMethods = Object.create(arrayProto);
const methodsToPatch = [
  "push",
  "pop",
  "shift",
  "unshift",
  "splice",
  "sort",
  "reverse"
];

/**
 * Intercept mutating methods and emit events
 */
methodsToPatch.forEach(function(method) {
  // cache original 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) {
      case "push":
      case "unshift":
        inserted = args;
        break;
      case "splice":
        inserted = args.slice(2);
        break;
    }
    if (inserted) ob.observeArray(inserted);
    // notify change
    ob.dep.notify();
    return result;
  });
});

/**
 * Observe a list of Array items.
 */
Observer.prototype.observeArray = function observeArray(items) {
  for (var i = 0, l = items.length; i < l; i++) {
    observe(items[i]);
  }
};
复制代码

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

8. Vue 组件 data 为何必须是函数 ?

new Vue()实例中,data 能够直接是一个对象,为何在 vue 组件中,data 必须是一个函数呢?

由于组件是能够复用的,JS 里对象是引用关系,若是组件 data 是一个对象,那么子组件中的 data 属性值会互相污染,产生反作用。

因此一个组件的 data 选项必须是一个函数,所以每一个实例能够维护一份被返回对象的独立的拷贝。new Vue 的实例是不会被复用的,所以不存在以上问题。

9. 谈谈 Vue 事件机制,手写$on,$off,$emit,$once

Vue 事件机制本质上就是一个发布-订阅模式的实现。

class Vue {
  constructor() {
    //  事件通道调度中心
    this._events = Object.create(null);
  }
  $on(event, fn) {
    if (Array.isArray(event)) {
      event.map(item => {
        this.$on(item, fn);
      });
    } else {
      (this._events[event] || (this._events[event] = [])).push(fn);
    }
    return this;
  }
  $once(event, fn) {
    function on() {
      this.$off(event, on);
      fn.apply(this, arguments);
    }
    on.fn = fn;
    this.$on(event, on);
    return this;
  }
  $off(event, fn) {
    if (!arguments.length) {
      this._events = Object.create(null);
      return this;
    }
    if (Array.isArray(event)) {
      event.map(item => {
        this.$off(item, fn);
      });
      return this;
    }
    const cbs = this._events[event];
    if (!cbs) {
      return this;
    }
    if (!fn) {
      this._events[event] = null;
      return this;
    }
    let cb;
    let i = cbs.length;
    while (i--) {
      cb = cbs[i];
      if (cb === fn || cb.fn === fn) {
        cbs.splice(i, 1);
        break;
      }
    }
    return this;
  }
  $emit(event) {
    let cbs = this._events[event];
    if (cbs) {
      const args = [].slice.call(arguments, 1);
      cbs.map(item => {
        args ? item.apply(this, args) : item.call(this);
      });
    }
    return this;
  }
}
复制代码

10. 说说 Vue 的渲染过程

调用 compile 函数,生成 render 函数字符串 ,编译过程以下:

parse 函数解析 template,生成 ast(抽象语法树)
optimize 函数优化静态节点 (标记不须要每次都更新的内容,diff 算法会直接跳过静态节点,从而减小比较的过程,优化了 patch 的性能)
generate 函数生成 render 函数字符串

调用 new Watcher 函数,监听数据的变化,当数据发生变化时，Render 函数执行生成 vnode 对象
调用 patch 方法,对比新旧 vnode 对象,经过 DOM diff 算法,添加、修改、删除真正的 DOM 元素

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

export default {
  name: "keep-alive",
  abstract: true, // 抽象组件属性 ,它在组件实例创建父子关系的时候会被忽略,发生在 initLifecycle 的过程当中
  props: {
    include: patternTypes, // 被缓存组件
    exclude: patternTypes, // 不被缓存组件
    max: [String, Number] // 指定缓存大小
  },

  created() {
    this.cache = Object.create(null); // 缓存
    this.keys = []; // 缓存的VNode的键
  },

  destroyed() {
    for (const key in this.cache) {
      // 删除全部缓存
      pruneCacheEntry(this.cache, key, this.keys);
    }
  },

  mounted() {
    // 监听缓存/不缓存组件
    this.$watch("include", val => {
      pruneCache(this, name => matches(val, name));
    });
    this.$watch("exclude", val => {
      pruneCache(this, name => !matches(val, name));
    });
  },

  render() {
    // 获取第一个子元素的 vnode
    const slot = this.$slots.default;
    const vnode: VNode = getFirstComponentChild(slot);
    const componentOptions: ?VNodeComponentOptions =
      vnode && vnode.componentOptions;
    if (componentOptions) {
      // name不在inlcude中或者在exlude中 直接返回vnode
      // check pattern
      const name: ?string = getComponentName(componentOptions);
      const { include, exclude } = this;
      if (
        // not included
        (include && (!name || !matches(include, name))) ||
        // excluded
        (exclude && name && matches(exclude, name))
      ) {
        return vnode;
      }

      const { cache, keys } = this;
      // 获取键，优先获取组件的name字段，不然是组件的tag
      const key: ?string =
        vnode.key == null
          ? // same constructor may get registered as different local components
            // so cid alone is not enough (#3269)
            componentOptions.Ctor.cid +
            (componentOptions.tag ? `::${componentOptions.tag}` : "")
          : vnode.key;
      // 命中缓存,直接从缓存拿vnode 的组件实例,而且从新调整了 key 的顺序放在了最后一个
      if (cache[key]) {
        vnode.componentInstance = cache[key].componentInstance;
        // make current key freshest
        remove(keys, key);
        keys.push(key);
      }
      // 不命中缓存,把 vnode 设置进缓存
      else {
        cache[key] = vnode;
        keys.push(key);
        // prune oldest entry
        // 若是配置了 max 而且缓存的长度超过了 this.max，还要从缓存中删除第一个
        if (this.max && keys.length > parseInt(this.max)) {
          pruneCacheEntry(cache, keys[0], keys, this._vnode);
        }
      }
      // keepAlive标记位
      vnode.data.keepAlive = true;
    }
    return vnode || (slot && slot[0]);
  }
};
复制代码

原理

获取 keep-alive 包裹着的第一个子组件对象及其组件名
根据设定的 include/exclude（若是有）进行条件匹配,决定是否缓存。不匹配,直接返回组件实例
根据组件 ID 和 tag 生成缓存 Key,并在缓存对象中查找是否已缓存过该组件实例。若是存在,直接取出缓存值并更新该 key 在 this.keys 中的位置(更新 key 的位置是实现 LRU 置换策略的关键)
在 this.cache 对象中存储该组件实例并保存 key 值,以后检查缓存的实例数量是否超过 max 的设置值,超过则根据 LRU 置换策略删除最近最久未使用的实例（便是下标为 0 的那个 key）
最后组件实例的 keepAlive 属性设置为 true,这个在渲染和执行被包裹组件的钩子函数会用到,这里不细说

LRU 缓存淘汰算法

LRU（Least recently used）算法根据数据的历史访问记录来进行淘汰数据,其核心思想是“若是数据最近被访问过,那么未来被访问的概率也更高”。

keep-alive 的实现正是用到了 LRU 策略,将最近访问的组件 push 到 this.keys 最后面,this.keys[0]也就是最久没被访问的组件,当缓存实例超过 max 设置值,删除 this.keys[0]

12. vm.$set()实现原理是什么?

受现代 JavaScript 的限制 (并且 Object.observe 也已经被废弃)，Vue 没法检测到对象属性的添加或删除。

因为 Vue 会在初始化实例时对属性执行 getter/setter 转化，因此属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

对于已经建立的实例，Vue 不容许动态添加根级别的响应式属性。可是，可使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。

那么 Vue 内部是如何解决对象新增属性不能响应的问题的呢?

export function set(target: Array<any> | Object, key: any, val: any): any {
  // target 为数组
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    // 修改数组的长度, 避免索引>数组长度致使splice()执行有误
    target.length = Math.max(target.length, key);
    // 利用数组的splice变异方法触发响应式
    target.splice(key, 1, val);
    return val;
  }
  // target为对象, key在target或者target.prototype上 且必须不能在 Object.prototype 上,直接赋值
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  // 以上都不成立, 即开始给target建立一个全新的属性
  // 获取Observer实例
  const ob = (target: any).__ob__;
  // target 自己就不是响应式数据, 直接赋值
  if (!ob) {
    target[key] = val;
    return val;
  }
  // 进行响应式处理
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;
}
复制代码

若是目标是数组,使用 vue 实现的变异方法 splice 实现响应式
若是目标是对象,判断属性存在,即为响应式,直接赋值
若是 target 自己就不是响应式,直接赋值
若是属性不是响应式,则调用 defineReactive 方法进行响应式处理

后记

若是你和我同样喜欢前端,也爱动手折腾,欢迎关注我一块儿玩耍啊～ ❤️

博客

个人博客

公众号

前端时刻