快捷導(dǎo)航

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

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

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

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

大致原理是這樣的：

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

1. 先定義一個(gè)對象

let obj = {
 name: 'jw'
}

2. 定義一個(gè)監(jiān)聽函數(shù)

/**
* 判斷監(jiān)聽的是否是對象
* 如果是對象，就遍歷，并且對每個(gè)屬性進(jìn)行定義get 和 set
*/

function observer(obj) {
 if(typeof obj === 'object') {
  for (let key in obj) {
  // defineReactive 方法設(shè)置get和set，見第三步
   defineReactive(obj, key, obj[key]);
  }
 }
}

3.定義一個(gè)函數(shù)，處理每個(gè)屬性

function defineReactive(obj, key, value) {
 Object.defineProperty(obj, key, {
  get() {
   return value;
  },
  set(val) {
   console.log('數(shù)據(jù)更新了')
   value = val;
  }
 })
}

ok. 到這里初版已經(jīng)實(shí)現(xiàn)了。嘗試一下吧

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

控制臺(tái)輸出:
//數(shù)據(jù)更新了

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

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

執(zhí)行以下代碼

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

控制臺(tái)輸出: 空

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

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

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

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

控制臺(tái)輸出:
//數(shù)據(jù)更新了

可惜的是，如果對象是一個(gè)數(shù)組，Object.defineProperty就無法起作用了，比如:

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

控制臺(tái)輸出:
//空

實(shí)際上，不止push，包括slice，shift，unshif...都是沒有作用.

5. 重寫數(shù)組的方法

let arr = ['push', 'slice', 'shift', 'unshift'];
arr.forEach(method=> {
 let oldPush = Array.prototype[method];
 Array.prototype[method] = function(value) {
  console.log('數(shù)據(jù)更新了')
  oldPush.call(this, value)
 }
})

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

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

控制臺(tái)輸出:
//數(shù)據(jù)更新了

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

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

以下完整代碼

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

// vue 數(shù)據(jù)劫持 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('數(shù)據(jù)更新了')
   value = val;
  }
 })
}
observer(obj);


// obj.age.old = '50'


// Object.defineProperty 對 數(shù)組無效
let arr = ['push', 'slice', 'shift', 'unshift'];

arr.forEach(method=> {
 let oldPush = Array.prototype[method];
 Array.prototype[method] = function(value) {
  console.log('數(shù)據(jù)更新了')
  oldPush.call(this, value)
 }
})
obj.skill = [1, 2, 3];
obj.skill.push(4);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: