在vue2中，什么是雙向綁定，為(wei)什么vue3要進行優化？
一、什么是雙向綁定
我們先從單向綁定切入單向綁定非常簡單，就是把Model綁定到View，當我們用JavaScript代碼更新Model時，View就會自動更新雙向綁定就很容易聯想到了，在單向綁定的基礎上，用戶更新了View，Model的(de)數據也自動被更新(xin)了，這種(zhong)情(qing)況(kuang)就是雙(shuang)向綁定(ding)舉(ju)個栗子
當用戶填寫表單時，View的狀態就被更新了，如果此時可以自動更新Model的狀態，那就相當于我們把Model和View做了(le)雙向綁定(ding)關(guan)系圖如下(xia)
二、雙向綁定的原理是什么
我們都知道 Vue 是數(shu)據雙向(xiang)綁定的框架，雙向(xiang)綁定由(you)三個重要部分構(gou)成
- 數據層（Model）：應用的數據及業務邏輯
- 視圖層（View）：應用的展示效果，各類UI組件
- 業務邏輯層（ViewModel）：框架封裝的核心，它負責將數據與視圖關聯起來
而上面的這個分層的架構方案，可以用一個專業術語進行稱呼：MVVM這(zhe)里的控制層的核心(xin)功能便(bian)是 “數據(ju)雙向綁(bang)(bang)定” 。自然，我(wo)們(men)只需弄懂它是什么，便(bian)可以進一步了(le)解數據(ju)綁(bang)(bang)定的原理
理解ViewModel
它的主要職責就是：
- 數據變化后更新視圖
- 視圖變化后更新數據
當然，它(ta)還(huan)有(you)兩個(ge)主(zhu)要部分組成
- 監聽器（Observer）：對所有數據的屬性進行監聽
- 解析器（Compiler）：對每個元素節點的指令進行掃描跟解析,根據指令模板替換數據,以及綁定相應的更新函數
三、實現雙向綁定
我們還是以Vue為例，先來看看Vue中的雙向綁定流程是什么(me)的
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選項執(zhi)行響應化(hua)具體操作
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
對每個元素節(jie)點的(de)指令(ling)進行掃描跟解析(xi),根據指令(ling)模板替換數據,以及(ji)綁(bang)定相(xiang)應的(de)更(geng)新(xin)函(han)數
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() 方法會直(zhi)接在一個(ge)對象(xiang)上定義一個(ge)新屬性，或者(zhe)修改一個(ge)對象(xiang)的現有屬性，并返回此對象(xiang)
為什么能實現響應式
通過defineProperty 兩個屬性，get及set
- get
屬性的 getter 函(han)數，當訪(fang)問(wen)該屬性時(shi)(shi)，會調用(yong)此函(han)數。執行時(shi)(shi)不(bu)傳入任何參數，但是(shi)(shi)會傳入 this 對(dui)象（由于繼承關(guan)系，這里的this并不(bu)一定(ding)是(shi)(shi)定(ding)義(yi)該屬性的對(dui)象）。該函(han)數的返(fan)回值會被用(yong)作屬性的值
- set
屬性的 setter 函數(shu)(shu)，當屬性值被修改時(shi)，會調用此函數(shu)(shu)。該方法接受(shou)一個參數(shu)(shu)（也就是被賦予(yu)的新值），會傳入(ru)賦值時(shi)的 this 對象。默認(ren)為(wei) 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方法(fa)，實現數據響(xiang)應式(shi)
const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
obj.foo = new Date().toLocaleTimeString()
},1000)
在對象存在多個key情(qing)況(kuang)下，需要進(jin)行遍(bian)歷
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()
}
}
上(shang)述(shu)例子能夠實現對一(yi)個對象的基本響應(ying)式，但仍然存在諸多問題(ti)
現(xian)在對(dui)一個對(dui)象進行刪除與添加屬(shu)性操作，無法劫持到(dao)
const obj = {
foo: "foo",
bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok
當我們對一個數組進(jin)行監(jian)聽的時候(hou)，并不那么好使了
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無法(fa)劫(jie)持到(dao)，從(cong)而(er)無法(fa)實(shi)現數(shu)據響應式，
所以在Vue2中，增加了set、delete API，并且對數組api方法進行一個重寫
還有一個(ge)問(wen)題則是，如果存在深(shen)層的嵌套對象關系(xi)，需要深(shen)層的進(jin)行監聽，造成了(le)性能(neng)的極(ji)大問(wen)題
小結
- 檢測不到對象屬性的添加和刪除
- 數組
API方法無法監聽到 - 需要對每個屬性進行遍歷監聽，如果嵌套對象，需要深層監聽，造成性能問題
2、proxy
Proxy的監(jian)聽(ting)是針(zhen)對一個對象的，那(nei)么對這個對象的所有操作會(hui)進入(ru)監(jian)聽(ting)操作，這就完全(quan)可以代理(li)所有屬(shu)性了(le)
在ES6系列中，我們詳細講解過Proxy的使(shi)用，就(jiu)不再述說了
下面通過(guo)代碼進行展示(shi)：
定義一個響應式方法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
}
測試(shi)一下簡單數據的操作，發現都能劫持(chi)
const state = reactive({
foo: 'foo'
})
// 1.獲取
state.foo // ok
// 2.設置已存在屬性
state.foo = 'fooooooo' // ok
// 3.設置不存在屬性
state.dong = 'dong' // ok
// 4.刪除屬性
delete state.dong // ok
再測試嵌套(tao)對象情況，這時候發(fa)現就不那(nei)么(me) 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只(zhi)能遍(bian)歷(li)對(dui)象(xiang)屬性進行劫(jie)持(chi)
function observe(obj) {
if (typeof obj !== 'object' || obj == null) {
return
}
Object.keys(obj).forEach(key => {
defineReactive(obj, key, obj[key])
})
}
Proxy直(zhi)接可以(yi)劫持整個對象(xiang)，并(bing)返回(hui)一個新對象(xiang)，我們(men)可以(yi)只操作新的對象(xiang)達(da)到響(xiang)應(ying)式(shi)目的
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
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
