本文為面試官VUE系列
總進度:3/33
一、什麼是雙向綁定
我們先從單向綁定切入
單向綁定非常簡單,就是把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
- https://vue3js.cn
@JS語音答題社群