有哪些vue高頻原理面試題

這期內容當中小編將會給大家帶來有關有哪些vue高頻原理面試題，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

本文分享12道高頻vue原理面試題，覆蓋了 vue 核心實現原理，其實一個框架的實現原理一篇文章是不可能說完的，希望通過這 12 道問題，讓讀者對自己的 Vue 掌握程度有一定的認識(B 數)，從而彌補自己的不足,更好的掌握 Vue。

1. Vue 響應式原理

核心實現類:

Observer : 它的作用是給對象的屬性添加 getter 和 setter，用于依賴收集和派發更新

Dep : 用于收集當前響應式對象的依賴關系,每個響應式對象包括子對象都擁有一個 Dep 實例（里面 subs 是 Watcher 實例數組）,當數據有變更時,會通過 dep.notify()通知各個 watcher。

Watcher : 觀察者對象 , 實例分為渲染 watcher (render watcher),計算屬性 watcher (computed watcher),偵聽器 watcher（user watcher）三種

Watcher 和 Dep 的關系

watcher 中實例化了 dep 并向 dep.subs 中添加了訂閱者,dep 通過 notify 遍歷了 dep.subs 通知每個 watcher 更新。

依賴收集

1. initState 時,對 computed 屬性初始化時,觸發 computed watcher 依賴收集
2. initState 時,對偵聽屬性初始化時,觸發 user watcher 依賴收集
3. render()的過程,觸發 render watcher 依賴收集
4. re-render 時,vm.render()再次執行,會移除所有 subs 中的 watcer 的訂閱,重新賦值。

派發更新

1. 組件中對響應的數據進行了修改,觸發 setter 的邏輯
2. 調用 dep.notify()
3. 遍歷所有的 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 執行是單線程的，它是基于事件循環的。事件循環大致分為以下幾個步驟:

1. 所有同步任務都在主線程上執行，形成一個執行棧（execution context stack）。
2. 主線程之外，還存在一個"任務隊列"（task queue）。只要異步任務有了運行結果，就在"任務隊列"之中放置一個事件。
3. 一旦"執行棧"中的所有同步任務執行完畢，系統就會讀取"任務隊列"，看看里面有哪些事件。那些對應的異步任務，于是結束等待狀態，進入執行棧，開始執行。
4. 主線程不斷重復上面的第三步。

主線程的執行過程就是一個 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 方法的實現原理:

1. vue 用異步隊列的方式來控制 DOM 更新和 nextTick 回調先后執行
2. microtask 因為其高優先級特性，能確保隊列中的微任務在一次事件循環前被執行完畢
3. 考慮兼容問題,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 的渲染過程

1. 調用 compile 函數,生成 render 函數字符串 ,編譯過程如下:

• parse 函數解析 template,生成 ast(抽象語法樹)
• optimize 函數優化靜態節點 (標記不需要每次都更新的內容,diff 算法會直接跳過靜態節點,從而減少比較的過程,優化了 patch 的性能)
• generate 函數生成 render 函數字符串

1. 調用 new Watcher 函數,監聽數據的變化,當數據發生變化時，Render 函數執行生成 vnode 對象
2. 調用 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]);
  }
};

原理

1. 獲取 keep-alive 包裹著的第一個子組件對象及其組件名
2. 根據設定的 include/exclude（如果有）進行條件匹配,決定是否緩存。不匹配,直接返回組件實例
3. 根據組件 ID 和 tag 生成緩存 Key,并在緩存對象中查找是否已緩存過該組件實例。如果存在,直接取出緩存值并更新該 key 在 this.keys 中的位置(更新 key 的位置是實現 LRU 置換策略的關鍵)
4. 在 this.cache 對象中存儲該組件實例并保存 key 值,之后檢查緩存的實例數量是否超過 max 的設置值,超過則根據 LRU 置換策略刪除最近最久未使用的實例（即是下標為 0 的那個 key）
5. 最后組件實例的 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;
}

1. 如果目標是數組,使用 vue 實現的變異方法 splice 實現響應式
2. 如果目標是對象,判斷屬性存在,即為響應式,直接賦值
3. 如果 target 本身就不是響應式,直接賦值
4. 如果屬性不是響應式,則調用 defineReactive 方法進行響應式處理

上述就是小編為大家分享的有哪些vue高頻原理面試題了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。