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

本文爲面試官VUE系列
總進度：3／33vue

1、什麼是雙向綁定

咱們先從單向綁定切入node

單向綁定很是簡單，就是把Model綁定到View，當咱們用JavaScript代碼更新Model時，View就會自動更新面試

雙向綁定就很容易聯想到了，在單向綁定的基礎，用戶更新了View，Model的數據也自動被更新了，這種狀況就是雙向綁定架構

舉個栗子框架

當用戶填寫表單時，View的狀態就被更新了，若是此時能夠自動更新Model的狀態，那就至關於咱們把Model和View作了雙向綁定dom

關係圖以下函數

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

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

數據層（Model）：應用的數據及業務邏輯
視圖層（View）：應用的展現效果，各種UI組件
業務邏輯層（ViewModel）：框架封裝的核心，它負責將數據與視圖關聯起來

而上面的這個分層的架構方案，能夠用一個專業術語進行稱呼：MVVMthis

這裏的控制層的核心功能即是「數據雙向綁定」。天然，咱們只需弄懂它是什麼，即可以進一步瞭解數據綁定的原理3d

理解ViewModel

它的主要職責就是：

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

固然，它還有兩個主要部分組成

監聽器（Observer）：對全部數據的屬性進行監聽
解析器（Compiler）：對每一個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數

3、如何實現雙向數據

咱們仍是以Vue爲例，先來看看Vue中的雙向綁定流程是什麼的

new Vue() 首先執行初始化，對data執行響應化處理，這個過程發生Observe中
同時對模板執行編譯，找到其中動態綁定的數據，從data中獲取並初始化視圖，這個過程發生在Compile中
同時定義⼀個更新函數和Watcher，未來對應數據變化時Watcher會調用更新函數
因爲data的某個key在⼀個視圖中可能出現屢次，因此每一個key都須要⼀個管家Dep來管理多個Watcher
未來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統⼀通知

實現思路

defineReactive時爲每⼀個key建立⼀個Dep實例
初始化視圖時讀取某個key，例如name1，建立⼀個watcher1
因爲觸發name1的getter方法，便將watcher1添加到name1對應的Dep中
當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執行更新方法
    },
  });
}

參考文獻

@JS每日一題