3分鐘瞭解vue資料劫持的原理
目的: 瞭解Object.defineProperty如何實現資料劫持
閱讀時間: 3 分鐘
大致原理是這樣的:
- 定義一個監聽函式,對物件的每一個屬性進行監聽
- 通過Object.defineProperty對監聽的每一個屬性設定get 和 set 方法。
- 對物件實行監聽
- 對物件內嵌物件進行處理
- 對陣列物件進行處理
1. 先定義一個物件
let obj = { name: 'jw' } 複製程式碼
2. 定義一個監聽函式
/** * 判斷監聽的是否是物件 * 如果是物件,就遍歷,並且對每個屬性進行定義get 和 set */ function observer(obj) { if(typeof obj === 'object') { for (let key in obj) { // defineReactive 方法設定get和set,見第三步 defineReactive(obj, key, obj[key]); } } } 複製程式碼
3.定義一個函式,處理每個屬性
function defineReactive(obj, key, value) { Object.defineProperty(obj, key, { get() { return value; }, set(val) { console.log('資料更新了') value = val; } }) } 複製程式碼
ok. 到這裡初版已經實現了。嘗試一下吧
observer(obj); obj.name = 'haha' 控制檯輸出: //資料更新了 複製程式碼
以上已經實現設定obj的屬性的時候,被監聽到,並且可以去執行一些程式碼了。但是,如果物件裡面嵌入了物件呢?比如:
let obj = { name: 'jw', age: { old: 60 } } 複製程式碼
執行以下程式碼
observer(obj); obj.age.old = '50' 控制檯輸出: 空 複製程式碼
4.對監控的obj進行迭代處理
// 修改defineReactive , 新增一行程式碼 function defineReactive(obj, key, value) { // 如果物件的屬性也是一個物件。迭代處理 observer(value); Object.defineProperty(obj, key, { //.... }) } 複製程式碼
再執行以下程式碼:
observer(obj); obj.age.old = '50' 控制檯輸出: //資料更新了 複製程式碼
可惜的是,如果物件是一個數組,Object.defineProperty就無法起作用了,比如:
obj.skill = [1, 2, 3]; obj.age.push(4); 控制檯輸出: //空 複製程式碼
實際上,不止push,包括slice,shift,unshif...都是沒有作用.
5. 重寫陣列的方法
let arr = ['push', 'slice', 'shift', 'unshift']; arr.forEach(method=> { let oldPush = Array.prototype[method]; Array.prototype[method] = function(value) { console.log('資料更新了') oldPush.call(this, value) } }) 複製程式碼
再執行以下程式碼:
obj.skill = [1, 2, 3]; obj.skill.push(4); 控制檯輸出: //資料更新了 複製程式碼
但是,陣列的length操作仍然是無效的。這也是為什麼vue中只能通過方法去改變陣列的原因了。
總結: Object.defineProperty只是解決了狀態變更後,如何觸發通知的問題,那要通知誰呢?誰會關心那些屬性發生了變化呢?以後再說。
感謝閱讀!
我是海明月, 前端小學生。
以下完整程式碼
let obj = { name: 'jw', age: { old: '60' } } // vue 資料劫持 Observer.defineProperty function observer(obj) { if(typeof obj === 'object') { for (let key in obj) { defineReactive(obj, key, obj[key]); } } } function defineReactive(obj, key, value) { observer(value); Object.defineProperty(obj, key, { get() { return value; }, set(val) { console.log('資料更新了') value = val; } }) } observer(obj); // obj.age.old = '50' // Object.defineProperty 對 陣列無效 let arr = ['push', 'slice', 'shift', 'unshift']; arr.forEach(method=> { let oldPush = Array.prototype[method]; Array.prototype[method] = function(value) { console.log('資料更新了') oldPush.call(this, value) } }) obj.skill = [1, 2, 3]; obj.skill.push(4); 複製程式碼