回憶

在上一篇Vue響應式原理-理解Observer、Dep、Watcher簡單講解了Observer、Dep、Watcher三者的關系。

在Observer的偽代碼中我們模擬了如下代碼:

class Observer { constructor() {  // 響應式綁定數據通過方法  observe(this.data); }}export function observe (data) { const keys = Object.keys(data); for (let i = 0; i < keys.length; i++) {  // 將data中我們定義的每個屬性進行響應式綁定  defineReactive(obj, keys[i]); }}export function defineReactive () { // ...省略 Object.defineProperty get-set}

今天我們就進一步了解Observer里還做了什么事。

Array的變化如何監聽？

data 中的數據如果是一個數組怎么辦？我們發現Object.defineProperty對數組進行響應式化是有缺陷的。

雖然我們可以監聽到索引的改變。

function defineReactive (obj, key, val) {  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: () => {      console.log('我被讀了，我要不要做點什么好?');      return val;    },    set: newVal => {      if (val === newVal) {        return;      }      val = newVal;      console.log("數據被改變了，我要渲染到頁面上去!");    }  })}let data = [1];// 對數組key進行監聽defineReactive(data, 0, 1);console.log(data[0]); // 我被讀了，我要不要做點什么好?data[0] = 2; // 數據被改變了，我要渲染到頁面上去!

但是defineProperty不能檢測到數組長度的變化，準確的說是通過改變length而增加的長度不能監測到。這種情況無法觸發任何改變。

data.length = 0; // 控制臺沒有任何輸出

而且監聽數組所有索引的的代價也比較高，綜合一些其他因素，Vue用了另一個方案來處理。

首先我們的observe需要改造一下，單獨加一個數組的處理。

// 將data中我們定義的每個屬性進行響應式綁定export function observe (data) {  const keys = Object.keys(data);  for (let i = 0; i < keys.length; i++) {    // 如果是數組    if (Array.isArray(keys[i])) {      observeArray(keys[i]);    } else {      // 如果是對象      defineReactive(obj, keys[i]);    }  }}// 數組的處理export function observeArray () {  // ...省略}

那接下來我們就應該考慮下Array變化如何監聽？

Vue 中對這個數組問題的解決方案非常的簡單粗暴，就是對能夠改變數組的方法做了一些手腳。

我們知道，改變數組的方法有很多，舉個例子比如說push方法吧。push存在Array.prototype上的，如果我們能
能攔截到原型上的push方法，是不是就可以做一些事情呢？

Object.defineProperty

對象里目前存在的屬性描述符有兩種主要形式：數據描述符和存取描述符。存取描述符是由getter-setter函數對描述的屬性，也就是我們用來給對象做響應式綁定的。Object.defineProperty-MDN