3分鐘了解vue數據劫持的原理實現(xiàn)

更新時間：2019年05月01日 15:02:37 作者：海明月

這篇文章主要介紹了3分鐘了解vue數據劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

目的: 了解Object.defineProperty如何實現(xiàn)數據劫持

大致原理是這樣的：

定義一個監(jiān)聽函數，對對象的每一個屬性進行監(jiān)聽
通過Object.defineProperty對監(jiān)聽的每一個屬性設置get 和 set 方法。
對對象實行監(jiān)聽
對對象內嵌對象進行處理
對數組對象進行處理

1. 先定義一個對象

let obj = {
 name: 'jw'
}

2. 定義一個監(jiān)聽函數

/**
* 判斷監(jiān)聽的是否是對象
* 如果是對象，就遍歷，并且對每個屬性進行定義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. 到這里初版已經實現(xiàn)了。嘗試一下吧

observer(obj);
obj.name = 'haha'

控制臺輸出:
//數據更新了

以上已經實現(xiàn)設置obj的屬性的時候，被監(jiān)聽到，并且可以去執(zhí)行一些代碼了。但是，如果對象里面嵌入了對象呢？比如:

let obj = {
 name: 'jw',
 age: {
  old: 60
 }
}

執(zhí)行以下代碼

observer(obj);
obj.age.old = '50'

控制臺輸出: 空

4.對監(jiān)控的obj進行迭代處理

// 修改defineReactive ， 添加一行代碼
function defineReactive(obj, key, value) {
 // 如果對象的屬性也是一個對象。迭代處理
 observer(value);
 Object.defineProperty(obj, key, {
  //....
 })
}

再執(zhí)行以下代碼:

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)
 }
})

再執(zhí)行以下代碼:

obj.skill = [1, 2, 3];
obj.skill.push(4);

控制臺輸出:
//數據更新了

但是，數組的length操作仍然是無效的。這也是為什么vue中只能通過方法去改變數組的原因了。

總結: Object.defineProperty只是解決了狀態(tài)變更后，如何觸發(fā)通知的問題，那要通知誰呢？誰會關心那些屬性發(fā)生了變化呢？以后再說。

以下完整代碼

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);

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: