對雙向繫結的理解?
阿新 • • 發佈：2022-01-17
一、什麼是雙向繫結
我們先從單向繫結切入單向繫結非常簡單，就是把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執行響應化處理
classVue{
constructor(options){
this.$options=options;
this.$data=options.data;
//對data選項做響應式處理
observe(this.$data);
//代理data到vm上
proxy(this);
//執行編譯
newCompile(options.el,this);
}
}
對data選項執行響應化具體操作
functionobserve(obj){
if(typeofobj!=="object"||obj==null){
return;
}
newObserver(obj);
}
classObserver{
constructor(value){
this.value=value;
this.walk(value);
}
walk(obj){
Object.keys(obj).forEach((key)=>{
defineReactive(obj,key,obj[key]);
});
}
}
編譯Compile
對每個元素節點的指令進行掃描跟解析,根據指令模板替換資料,以及繫結相應的更新函式
classCompile{
constructor(el,vm){
this.$vm=vm;
this.$el=document.querySelector(el);//獲取dom
if(this.$el){
this.compile(this.$el);
}
}
compile(el){
constchildNodes=el.childNodes;
Array.from(childNodes).forEach((node)=>{//遍歷子元素
if(this.isElement(node)){//判斷是否為節點
console.log("編譯元素"+node.nodeName);
}elseif(this.isInterpolation(node)){
console.log("編譯插值⽂本"+node.textContent);//判斷是否為插值文字{{}}
}
if(node.childNodes&&node.childNodes.length>0){//判斷是否有子元素
this.compile(node);//對子元素進行遞迴遍歷
}
});
}
isElement(node){
returnnode.nodeType==1;
}
isInterpolation(node){
returnnode.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更新
//負責更新檢視
classWatcher{
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
classDep{
constructor(){
this.deps=[];//依賴管理
}
addDep(dep){
this.deps.push(dep);
}
notify(){
this.deps.forEach((dep)=>dep.update());
}
}
建立watcher時觸發getter
classWatcher{
constructor(vm,key,updateFn){
Dep.target=this;
this.vm[this.key];
Dep.target=null;
}
}
依賴收集，建立Dep例項
functiondefineReactive(obj,key,val){
this.observe(val);
constdep=newDep();
Object.defineProperty(obj,key,{
get(){
Dep.target&&dep.addDep(Dep.target);//Dep.target也就是Watcher例項
returnval;
},
set(newVal){
if(newVal===val)return;
dep.notify();//通知dep執行更新方法
},
});
}