這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助
一、什麼是雙向繫結
我們先從單向繫結切入單向繫結非常簡單，就是把Model繫結到View，當我們用JavaScript程式碼更新Model時，View就會自動更新雙向繫結就很容易聯想到了，在單向繫結的基礎上，使用者更新了View，Model的資料也自動被更新了，這種情況就是雙向繫結舉個例子
當使用者填寫表單時，View的狀態就被更新了，如果此時可以自動更新Model的狀態，那就相當於我們把Model和View做了雙向繫結關係圖如下
二、雙向繫結的原理是什麼
我們都知道 Vue 是資料雙向繫結的框架，雙向繫結由三個重要部分構成
- 資料層（Model）：應用的資料及業務邏輯
- 檢視層（View）：應用的展示效果，各類UI元件
- 業務邏輯層（ViewModel）：框架封裝的核心，它負責將資料與檢視關聯起來
而上面的這個分層的架構方案，可以用一個專業術語進行稱呼：MVVM這裡的控制層的核心功能便是 “資料雙向繫結” 。自然，我們只需弄懂它是什麼，便可以進一步瞭解資料繫結的原理
理解ViewModel
它的主要職責就是：
- 資料變化後更新檢視
- 檢視變化後更新資料
當然，它還有兩個主要部分組成
- 監聽器（Observer）：對所有資料的屬性進行監聽
- 解析器（Compiler）：對每個元素節點的指令進行掃描跟解析,根據指令模板替換資料,以及繫結相應的更新函式
三、實現雙向繫結
我們還是以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執行更新方法
},
});
}
參考文獻
- https://www.liaoxuefeng.com/wiki/1022910821149312/1109527162256416
- https://juejin.cn/post/6844903942254510087#heading-9