使用vue實現(xiàn)數(shù)據(jù)劫持的原理是什么

使用vue實現(xiàn)數(shù)據(jù)劫持的原理是什么？相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

Vue的優(yōu)點

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗。

1. 先定義一個對象

let obj = {
 name: 'jw'
}

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

/**
* 判斷監(jiā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.定義一個函數(shù)，處理每個屬性

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

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

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

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

以上已經(jīng)實現(xiàn)設(shè)置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'

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

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

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

控制臺輸出:
//空

實際上，不止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);

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

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

總結(jié): Object.defineProperty只是解決了狀態(tài)變更后，如何觸發(fā)通知的問題，那要通知誰呢？誰會關(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)容，你們掌握使用vue實現(xiàn)數(shù)據(jù)劫持的原理是什么的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！