一、什么是雙向綁定

我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的數據也自動被更新了，這種情況就是雙向綁定舉個栗子

當用戶填寫表單時，View的狀態(tài)就被更新了，如果此時可以自動更新Model的狀態(tài)，那就相當于我們把Model和View做了雙向綁定關系圖如下

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

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

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

而上面的這個分層的架構方案，可以用一個專業(yè)術語進行稱呼：MVVM這里的控制層的核心功能便是 “數據雙向綁定” 。自然，我們只需弄懂它是什么，便可以進一步了解數據綁定的原理

理解ViewModel

它的主要職責就是：

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

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

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

三、實現雙向綁定

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

1. new Vue()首先執(zhí)行初始化，對data執(zhí)行響應化處理，這個過程發(fā)生Observe中
2. 同時對模板執(zhí)行編譯，找到其中動態(tài)綁定的數據，從data中獲取并初始化視圖，這個過程發(fā)生在Compile中
3. 同時定義?個更新函數和Watcher，將來對應數據變化時Watcher會調用更新函數
4. 由于data的某個key在?個視圖中可能出現多次，所以每個key都需要?個管家Dep來管理多個Watcher
5. 將來data中數據?旦發(fā)生變化，會首先找到對應的Dep，通知所有Watcher執(zhí)行更新函數

流程圖如下：

實現

先來一個構造函數：執(zhí)行初始化，對data執(zhí)行響應化處理

class Vue {  constructor(options) {  this.$options = options;  this.$data = options.data;  // 對data選項做響應式處理  observe(this.$data);  // 代理data到vm上  proxy(this);  // 執(zhí)行編譯  new Compile(options.el, this);  }  
}  

對data選項執(zhí)行響應化具體操作

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

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

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)) {   // 判斷是否為節(jié)點  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統(tǒng)?通知

實現思路

1. defineReactive時為每?個key創(chuàng)建?個Dep實例
2. 初始化視圖時讀取某個key，例如name1，創(chuàng)建?個watcher1
3. 由于觸發(fā)name1的getter方法，便將watcher1添加到name1對應的Dep中
4. 當name1更新，setter觸發(fā)時，便可通過對應Dep通知其管理所有Watcher更新

// 負責更新視圖  
class Watcher {  constructor(vm, key, updater) {  this.vm = vm  this.key = key  this.updaterFn = updater  // 創(chuàng)建實例時，把當前實例指定到Dep.target靜態(tài)屬性上  Dep.target = this  // 讀一下key，觸發(fā)get  vm[key]  // 置空  Dep.target = null  }  // 未來執(zhí)行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());  }  
}  

創(chuàng)建watcher時觸發(fā)getter

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

依賴收集，創(chuàng)建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執(zhí)行更新方法  },  });  
}  

參考文獻

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