雙向資料繫結是什麼

林恒發表於2024-03-01

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

雙向資料繫結是什麼

一、什麼是雙向繫結

我們先從單向繫結切入單向繫結非常簡單，就是把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新雙向繫結就很容易聯想到了，在單向繫結的基礎上，使用者更新了View，Model的資料也自動被更新了，這種情況就是雙向繫結舉個例子

當使用者填寫表單時，View的狀態就被更新了，如果此時可以自動更新Model的狀態，那就相當於我們把Model和View做了雙向繫結關係圖如下

二、雙向繫結的原理是什麼

我們都知道 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. 由於觸發name1的getter方法，便將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

相關文章