一、什麼是雙向繫結
我們先從單向繫結切入單向繫結非常簡單，就是把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執行更新方法
},
});
}
四.vue3.0裡為什麼要用 Proxy API 替代 defineProperty API ？
1、Object.defineProperty
定義：Object.defineProperty() 方法會直接在一個物件上定義一個新屬性，或者修改一個物件的現有屬性，並返回此物件
為什麼能實現響應式
透過defineProperty 兩個屬性，get及set
- get
屬性的 getter 函式，當訪問該屬性時，會呼叫此函式。執行時不傳入任何引數，但是會傳入 this 物件（由於繼承關係，這裡的this並不一定是定義該屬性的物件）。該函式的返回值會被用作屬性的值
- set
屬性的 setter 函式，當屬性值被修改時，會呼叫此函式。該方法接受一個引數（也就是被賦予的新值），會傳入賦值時的 this 物件。預設為 undefined
下面透過程式碼展示：
定義一個響應式函式defineReactive
function update() {
app.innerText = obj.foo
}
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
val = newVal
update()
}
}
})
}
呼叫defineReactive，資料發生變化觸發update方法，實現資料響應式
const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
obj.foo = new Date().toLocaleTimeString()
},1000)
在物件存在多個key情況下，需要進行遍歷
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
如果存在巢狀物件的情況，還需要在defineReactive中進行遞迴
function defineReactive(obj, key, val) {
observe(val)
Object.defineProperty(obj, key, {
get() {
console.log(`get ${key}:${val}`);
return val
},
set(newVal) {
if (newVal !== val) {
val = newVal
update()
}
}
})
}
當給key賦值為物件的時候，還需要在set屬性中進行遞迴
set(newVal) {
if (newVal !== val) {
observe(newVal) // 新值是物件的情況
notifyUpdate()
}
}
上述例子能夠實現對一個物件的基本響應式，但仍然存在諸多問題
現在對一個物件進行刪除與新增屬性操作，無法劫持到
const obj = {
foo: "foo",
bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok
當我們對一個陣列進行監聽的時候，並不那麼好使了
const arrData = [1,2,3,4,5];
arrData.forEach((val,index)=>{
defineProperty(arrData,index,val)
})
arrData.push() // no ok
arrData.pop() // no ok
arrDate[0] = 99 // ok
可以看到資料的api無法劫持到，從而無法實現資料響應式，
所以在Vue2中，增加了set、delete API，並且對陣列api方法進行一個重寫
還有一個問題則是，如果存在深層的巢狀物件關係，需要深層的進行監聽，造成了效能的極大問題
小結
- 檢測不到物件屬性的新增和刪除
- 陣列
API方法無法監聽到 - 需要對每個屬性進行遍歷監聽，如果巢狀物件，需要深層監聽，造成效能問題
2、proxy
Proxy的監聽是針對一個物件的，那麼對這個物件的所有操作會進入監聽操作，這就完全可以代理所有屬性了
在ES6系列中，我們詳細講解過Proxy的使用，就不再述說了
下面透過程式碼進行展示：
定義一個響應式方法reactive
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return res
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
console.log(`設定${key}:${value}`)
return res
},
deleteProperty(target, key) {
const res = Reflect.deleteProperty(target, key)
console.log(`刪除${key}:${res}`)
return res
}
})
return observed
}
測試一下簡單資料的操作，發現都能劫持
const state = reactive({
foo: 'foo'
})
// 1.獲取
state.foo // ok
// 2.設定已存在屬性
state.foo = 'fooooooo' // ok
// 3.設定不存在屬性
state.dong = 'dong' // ok
// 4.刪除屬性
delete state.dong // ok
再測試巢狀物件情況，這時候發現就不那麼 OK 了
const state = reactive({
bar: { a: 1 }
})
// 設定巢狀物件屬性
state.bar.a = 10 // no ok
如果要解決，需要在get之上再進行一層代理
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return isObject(res) ? reactive(res) : res
},
return observed
}
3、總結
Object.defineProperty只能遍歷物件屬性進行劫持
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
Proxy直接可以劫持整個物件，並返回一個新物件，我們可以只操作新的物件達到響應式目的
function reactive(obj) {
if (typeof obj !== 'object' && obj != null) {
return obj
}
// Proxy相當於在物件外層加攔截
const observed = new Proxy(obj, {
get(target, key, receiver) {
const res = Reflect.get(target, key, receiver)
console.log(`獲取${key}:${res}`)
return res
},
set(target, key, value, receiver) {
const res = Reflect.set(target, key, value, receiver)
console.log(`設定${key}:${value}`)
return res
},
deleteProperty(target, key) {
const res = Reflect.deleteProperty(target, key)
console.log(`刪除${key}:${res}`)
return res
}
})
return observed
}
Proxy可以直接監聽陣列的變化（push、shift、splice）
const obj = [1,2,3] const proxtObj = reactive(obj) obj.psuh(4) // ok
Proxy有多達13種攔截方法,不限於apply、ownKeys、deleteProperty、has等等，這是Object.defineProperty不具備的
正因為defineProperty自身的缺陷，導致Vue2在實現響應式過程需要實現其他的方法輔助（如重寫陣列方法、增加額外set、delete方法）
// 陣列重寫
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
arrayProto[method] = function () {
originalProto[method].apply(this.arguments)
dep.notice()
}
});
// set、delete
Vue.set(obj,'bar','newbar')
Vue.delete(obj),'bar')
Proxy 不相容IE，也沒有 polyfill, defineProperty 能支援到IE9
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。
