深入淺出 Vue 系列 -- 資料劫持實現原理
資料雙向繫結作為 Vue 核心功能之一，其實現原理主要分為兩部分：
- 資料劫持
- 釋出訂閱模式
本篇文章主要介紹 Vue 實現資料劫持的思路，下一篇則會介紹釋出訂閱模式的設計。
二、針對 Object 型別的劫持
對於 Object 型別，主要劫持其屬性的讀取與設定操作。在 JavaScript 中物件的屬性主要由一個字串型別的“名稱”以及一個“屬性描述符”組成，屬性描述符包括以下選項：
- value： 該屬性的值；
- writable： 僅當值為 true 時表示該屬性可以被改變；
- get： getter （讀取器）；
- set： setter （設定器）；
- configurable： 僅當值為 true 時，該屬性可以被刪除以及屬性描述符可以被改變；
- enumerable： 僅當值為 true 時，該屬性可以被列舉。
上述 setter 和 getter 方法就是供開發者自定義屬性的讀取與設定操作，而設定物件屬性的描述符則少不了 Object.defineProperty() 方法：
function defineReactive (obj, key) {
let val = obj[key]
Object.defineProperty(obj, key, {
get () {
console.log(' === 收集依賴 === ')
console.log(' 當前值為：' + val)
return val
},
set (newValue) {
console.log(' === 通知變更 === ')
console.log(' 當前值為：' + newValue)
val = newValue
}
})
}
const student = {
name: 'xiaoming'
}
defineReactive(student, 'name') // 劫持 name 屬性的讀取和設定操作
複製程式碼
上述程式碼通過 Object.defineProperty() 方法設定屬性的 setter 與 getter 方法，從而達到劫持 student 物件中的 name 屬性的讀取和設定操作的目的。
讀者可以發現，該方法每次只能設定一個屬性 ，那麼就需要遍歷物件來完成其屬性的配置：
Object.keys(student).forEach(key => defineReactive(student, key)) 複製程式碼
另外還必須是一個具體的屬性 ，這也非常的致命。
假如後續需要擴充套件該物件，那麼就必須手動為新屬性設定 setter 和 getter 方法，**這就是為什麼不在 data 中宣告的屬性無法自動擁有雙向繫結效果的原因 **。（這時需要呼叫 Vue.set() 手動設定）
以上便是物件劫持的核心實現，但是還有以下重要的細節需要注意：
1、屬性描述符 - configurable
在 JavaScript 中，物件通過字面量建立時，其屬性描述符預設如下：
const foo = {
name: '123'
}
Object.getOwnPropertyDescriptor(foo, 'name') // { value: '123', writable: true, enumerable: true, configurable: true }
複製程式碼
前面也提到了 configurable 的值如果為 false，則無法再修改該屬性的描述符，所以在設定 setter 和 getter 方法時，需要注意 configurable 選項的取值，否則在使用 Object.defineProperty() 方法時會丟擲異常：
// 部分重複程式碼 這裡就不再羅列了。
function defineReactive (obj, key) {
// ...
const desc = Object.getOwnPropertyDescriptor(obj, key)
if (desc && desc.configurable === false) {
return
}
// ...
}
複製程式碼
而在 JavaScript 中，導致 configurable 值為 false 的情況還是很多的：
- 可能該屬性在此之前已經通過 Object.defineProperty() 方法設定了 configurable 的值；
- 通過 Object.seal() 方法設定該物件為密封物件，只能修改該屬性的值並且不能刪除該屬性以及修改屬性的描述符；
- 通過 Object.freeze() 方法凍結該物件，相比較 Object.seal() 方法，它更為嚴格之處體現在不允許修改屬性的值。
2、預設 getter 和 setter 方法
另外，開發者可能已經為物件的屬性設定了 getter 和 setter 方法，對於這種情況，Vue 當然不能破壞開發者定義的方法，所以 Vue 中還要保護預設的 getter 和 setter 方法：
// 部分重複程式碼 這裡就不再羅列了
function defineReactive (obj, key) {
let val = obj[key]
//....
// 預設 getter setter
const getter = desc && desc.get
const setter = desc && desc.set
Object.defineProperty(obj, key, {
get () {
const value = getter ? getter.call(obj) : val // 優先執行預設的 getter
return value
},
set (newValue) {
const value = getter ? getter.call(obj) : val
// 如果值相同則沒必要更新 === 的坑點 NaN!!!!
if (newValue === value || (value !== value && newValue !== newValue)) {
return
}
if (getter && !setter) {
// 使用者未設定 setter
return
}
if (setter) {
// 呼叫預設的 setter 方法
setter.call(obj, newValue)
} else {
val = newValue
}
}
})
}
複製程式碼
3、遞迴屬性值
最後一種比較重要的情況就是屬性的值可能也是一個物件，那麼在處理物件的屬性時，需要遞迴處理其屬性值：
function defineReactive (obj, key) {
let val = obj[key]
// ...
// 遞迴處理其屬性值
const childObj = observe(val)
// ...
}
複製程式碼
遞迴迴圈引用物件很容易出現遞迴爆棧問題，對於這種情況，Vue 通過定義ob 物件記錄已經被設定過 getter 和 setter 方法的物件，從而避免遞迴爆棧的問題。
function isObject (val) {
const type = val
return val !== null && (type === 'object' || type === 'function')
}
function observe (value) {
if (!isObject(value)) {
return
}
let ob
// 避免迴圈引用造成的遞迴爆棧問題
if (value.hasOwnProperty('__ob__') && value.__obj__ instanceof Observer) {
ob = value.__ob__
} else if (Object.isExtensible(value)) {
// 後續需要定義諸如 __ob__ 這樣的屬性，所以需要能夠擴充套件
ob = new Observer(value)
}
return ob
}
複製程式碼
上述程式碼中提到了物件的可擴充套件性，在 JavaScript 中所有物件預設都是可擴充套件的，但同時也提供了相應的方法允許物件不可擴充套件：
const obj = { name: 'xiaoming' }
Object.preventExtensions(obj)
obj.age = 20
console.log(obj.age) // undefined
複製程式碼
除了上述方法，還有前面提到的 Object.seal() 和 Object.freeze() 方法。
三、針對 Array 型別的劫持
陣列是一種特殊的物件，其下標實際上就是物件的屬性，所以理論上是可以採用 Object.defineProperty() 方法處理陣列物件 。
但是 Vue 並沒有採用上述方法劫持陣列物件，筆者猜測主要由於以下兩點：（讀者有更好的見解，歡迎留言。）
1、特殊的 length 屬性
陣列物件的 length 屬性的描述符天生獨特：
const arr = [1, 2, 3] Object.getOwnPropertyDescriptor(arr, 'length').configurable // false 複製程式碼
這就意味著無法通過 Object.defineProperty() 方法劫持 length 屬性的讀取和設定方法。
相比較物件的屬性，陣列下標變化地相對頻繁，並且改變陣列長度的方法也比較靈活，一旦陣列的長度發生變化，那麼在無法自動感知的情況下，開發者只能手動更新新增的陣列下標，這可是一個很繁瑣的工作。
2、陣列的操作場景
陣列主要的操作場景還是遍歷，而對於每一個元素都掛載一個 get 和 set 方法，恐怕也是不小的效能負擔。
3、陣列方法的劫持
最終 Vue 選擇劫持一些常用的陣列操作方法，從而知曉陣列的變化情況：
const methods = [ 'push', 'pop', 'shift', 'unshift', 'sort', 'reverse', 'splice' ] 複製程式碼
陣列方法的劫持涉及到原型相關的知識，首先陣列例項大部分方法都是來源於 Array.prototype 物件。
但是這裡不能直接篡改 Array.prototype 物件，這樣會影響所有的陣列例項，為了避免這種情況，需要採用原型繼承得到一個新的原型物件：
const arrayProto = Array.prototype const injackingPrototype = Object.create(arrayProto) 複製程式碼
拿到新的原型物件之後，再重寫這些常用的操作方法：
methods.forEach(method => {
const originArrayMethod = arrayProto[method]
injackingPrototype[method] = function (...args) {
const result = originArrayMethod.apply(this, args)
let inserted
switch (method) {
case 'push':
case 'unshift':
inserted = args
break
case 'splice':
inserted = args.slice(2)
break
}
if (inserted) {
// 對於新增的元素，繼續劫持
// ob.observeArray(inserted)
}
// 通知變化
return result
}
})
複製程式碼
最後，更新劫持陣列例項的原型，在 ES6 之前，可以通過瀏覽器私有屬性proto 指定原型，之後，便可以採用如下方法：
Object.setPrototypeOf(arr, injackingPrototype) 複製程式碼
順便提一下，採用 Vue.set() 方法設定陣列元素時，Vue 內部實際上是呼叫劫持後的 splice() 方法來觸發更新 。
四、總結
由上述內容可知，Vue 中的資料劫持分為兩大部分：
- 針對 Object 型別，採用 Object.defineProperty() 方法劫持屬性的讀取和設定方法 ；
- 針對 Array 型別，採用原型相關的知識劫持常用的函式，從而知曉當前陣列發生變化 。
並且 Object.defineProperty() 方法存在以下缺陷：
- 每次只能設定一個具體的屬性，導致需要遍歷物件來設定屬性，同時也導致了無法探測新增屬性 ；
- 屬性描述符 configurable 對其的影響是致命的 。
而 ES6 中的 Proxy 可以完美的解決這些問題（目前相容性是個大問題），這也是 Vue3.0 中的一個大動作，有興趣的讀者可以查閱相關的資料。
如果本文對您有所幫助，那麼點個關注，鼓勵一下筆者吧。