3分鐘瞭解vue資料劫持的原理

摘要： 目的: 瞭解Object.defineProperty如何實現資料劫持 閱讀時間: 3 分鐘 大致原理是這樣的： 定義一個監聽函式，對物件的每一個屬性進行監聽 通過Object.defineProperty對監聽的每一個屬性設定get 和 set 方法。 ...

目的: 瞭解Object.defineProperty如何實現資料劫持

閱讀時間: 3 分鐘

大致原理是這樣的：

1. 定義一個監聽函式，對物件的每一個屬性進行監聽
2. 通過Object.defineProperty對監聽的每一個屬性設定get 和 set 方法。
3. 對物件實行監聽
4. 對物件內嵌物件進行處理
5. 對陣列物件進行處理

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);
複製程式碼