面試官:說說你對雙向綁定的理解?

vue中文社區 發佈 2021-08-03T08:35:14.719465+00:00

本文為面試官VUE系列總進度:3/33一、什麼是雙向綁定我們先從單向綁定切入單向綁定非常簡單,就是把Model綁定到View,當我們用JavaScript代碼更新Model時,View就會自動更新雙向綁定就很容易聯想到了,在單向綁定的基礎,用戶更新了View,Model

本文為面試官VUE系列
總進度:3/33

一、什麼是雙向綁定

我們先從單向綁定切入

單向綁定非常簡單,就是把Model綁定到View,當我們用JavaScript代碼更新Model時,View就會自動更新

雙向綁定就很容易聯想到了,在單向綁定的基礎,用戶更新了ViewModel的數據也自動被更新了,這種情況就是雙向綁定

舉個栗子

當用戶填寫表單時,View的狀態就被更新了,如果此時可以自動更新Model的狀態,那就相當於我們把ModelView做了雙向綁定

關係圖如下

二、雙向綁定的原理是什麼

我們都知道 Vue 是數據雙向綁定的框架,雙向綁定由三個重要部分構成

  • 數據層(Model):應用的數據及業務邏輯
  • 視圖層(View):應用的展示效果,各類UI組件
  • 業務邏輯層(ViewModel):框架封裝的核心,它負責將數據與視圖關聯起來

而上面的這個分層的架構方案,可以用一個專業術語進行稱呼:MVVM

這裡的控制層的核心功能便是 「數據雙向綁定」 。自然,我們只需弄懂它是什麼,便可以進一步了解數據綁定的原理

理解ViewModel

它的主要職責就是:

  • 數據變化後更新視圖
  • 視圖變化後更新數據

當然,它還有兩個主要部分組成

  • 監聽器(Observer):對所有數據的屬性進行監聽
  • 解析器(Compiler):對每個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數

三、如何實現雙向數據

我們還是以Vue為例,先來看看Vue中的雙向綁定流程是什麼的

  1. new Vue()首先執行初始化,對data執行響應化處理,這個過程發生Observe

  2. 同時對模板執行編譯,找到其中動態綁定的數據,從data中獲取並初始化視圖,這個過程發生在Compile

  3. 同時定義⼀個更新函數和Watcher,將來對應數據變化時Watcher會調用更新函數

  4. 由於data的某個key在⼀個視圖中可能出現多次,所以每個key都需要⼀個管家Dep來管理多個Watcher

  5. 將來data中數據⼀旦發生變化,會首先找到對應的Dep,通知所有Watcher執行更新函數

流程圖如下:

實現

先來一個構造函數:執行初始化,對data執行響應化處理

class Vue {
  constructor(options) {
    this.$options = options;
    this.$data = options.data;

    // 對data選項做響應式處理
    observe(this.$data);

    // 代理data到vm上
    proxy(this);

    // 執行編譯
    new Compile(options.el, this);
  }
}

data選項執行響應化具體操作

function observe(obj) {
  if (typeof obj !== "object" || obj == null) {
    return;
  }
  new Observer(obj);
}

class Observer {
  constructor(value) {
    this.value = value;
    this.walk(value);
  }
  walk(obj) {
    Object.keys(obj).forEach((key) => {
      defineReactive(obj, key, obj[key]);
    });
  }
}

編譯Compile

對每個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數

class Compile {
  constructor(el, vm) {
    this.$vm = vm;
    this.$el = document.querySelector(el);  // 獲取dom
    if (this.$el) {
      this.compile(this.$el);
    }
  }
  compile(el) {
    const childNodes = el.childNodes; 
    Array.from(childNodes).forEach((node) => { // 遍歷子元素
      if (this.isElement(node)) {   // 判斷是否為節點
        console.log("編譯元素" + node.nodeName);
      } else if (this.isInterpolation(node)) {
        console.log("編譯插值⽂本" + node.textContent);  // 判斷是否為插值文本 {{}}
      }
      if (node.childNodes && node.childNodes.length > 0) {  // 判斷是否有子元素
        this.compile(node);  // 對子元素進行遞歸遍歷
      }
    });
  }
  isElement(node) {
    return node.nodeType == 1;
  }
  isInterpolation(node) {
    return node.nodeType == 3 && /\{\{(.*)\}\}/.test(node.textContent);
  }
}

依賴收集

視圖中會用到data中某key,這稱為依賴。同⼀個key可能出現多次,每次都需要收集出來用⼀個Watcher來維護它們,此過程稱為依賴收集

多個Watcher需要⼀個Dep來管理,需要更新時由Dep統⼀通知

實現思路

  1. defineReactive時為每⼀個key創建⼀個Dep實例
  2. 初始化視圖時讀取某個key,例如name1,創建⼀個watcher1
  3. 由於觸發name1getter方法,便將watcher1添加到name1對應的Dep中
  4. name1更新,setter觸發時,便可通過對應Dep通知其管理所有Watcher更新
// 負責更新視圖
class Watcher {
  constructor(vm, key, updater) {
    this.vm = vm
    this.key = key
    this.updaterFn = updater

    // 創建實例時,把當前實例指定到Dep.target靜態屬性上
    Dep.target = this
    // 讀一下key,觸發get
    vm[key]
    // 置空
    Dep.target = null
  }

  // 未來執行dom更新函數,由dep調用的
  update() {
    this.updaterFn.call(this.vm, this.vm[this.key])
  }
}

聲明Dep

class Dep {
  constructor() {
    this.deps = [];  // 依賴管理
  }
  addDep(dep) {
    this.deps.push(dep);
  }
  notify() { 
    this.deps.forEach((dep) => dep.update());
  }
}

創建watcher時觸發getter

class Watcher {
  constructor(vm, key, updateFn) {
    Dep.target = this;
    this.vm[this.key];
    Dep.target = null;
  }
}

依賴收集,創建Dep實例

function defineReactive(obj, key, val) {
  this.observe(val);
  const dep = new Dep();
  Object.defineProperty(obj, key, {
    get() {
      Dep.target && dep.addDep(Dep.target);// Dep.target也就是Watcher實例
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      dep.notify(); // 通知dep執行更新方法
    },
  });
}

參考文獻

  • https://www.liaoxuefeng.com/wiki/1022910821149312/1109527162256416
  • https://juejin.cn/post/6844903942254510087#heading-9
  • https://vue3js.cn

    @JS語音答題社群

關鍵字: