Vue響應式原理Observer、Dep、Watcher的示例分析

小編給大家分享一下Vue響應式原理Observer、Dep、Watcher的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Object.defineProperty

相信很多同學或多或少都了解Vue的響應式原理是通過Object.defineProperty實現的。被Object.defineProperty綁定過的對象，會變成「響應式」化。也就是改變這個對象的時候會觸發get和set事件。進而觸發一些視圖更新。舉個栗子?

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 = {
  text: 'hello world',
};

// 對data上的text屬性進行綁定
defineReactive(data, 'text', data.text);

console.log(data.text); // 控制臺輸出 <我被讀了，我要不要做點什么好?>
data.text = 'hello Vue'; // 控制臺輸出 <hello Vue && 數據被改變了，我要把新的值渲染到頁面上去!>

Observer 「響應式」

Vue中用Observer類來管理上述響應式化Object.defineProperty的過程。我們可以用如下代碼來描述，將this.data也就是我們在Vue代碼中定義的data屬性全部進行「響應式」綁定。

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

Dep 「依賴管理」

什么是依賴？

相信沒有看過源碼或者剛接觸Dep這個詞的同學都會比較懵。那Dep究竟是用來做什么的呢？ 我們通過defineReactive方法將data中的數據進行響應式后，雖然可以監聽到數據的變化了，那我們怎么處理通知視圖就更新呢？

Dep就是幫我們收集【究竟要通知到哪里的】。比如下面的代碼案例，我們發現，雖然data中有text和message屬性，但是只有message被渲染到頁面上，至于text無論怎么變化都影響不到視圖的展示，因此我們僅僅對message進行收集即可，可以避免一些無用的工作。

那這個時候message的Dep就收集到了一個依賴，這個依賴就是用來管理data中message變化的。

<div>
  <p>{{message}}</p>
</div>

data: {
  text: 'hello world',
  message: 'hello vue',
}

當使用watch屬性時，也就是開發者自定義的監聽某個data中屬性的變化。比如監聽message的變化，message變化時我們就要通知到watch這個鉤子，讓它去執行回調函數。

這個時候message的Dep就收集到了兩個依賴，第二個依賴就是用來管理watch中message變化的。

watch: {
  message: function (val, oldVal) {
    console.log('new: %s, old: %s', val, oldVal)
  },
}

當開發者自定義computed計算屬性時，如下messageT屬性，是依賴message的變化的。因此message變化時我們也要通知到computed，讓它去執行回調函數。 這個時候message的Dep就收集到了三個依賴，這個依賴就是用來管理computed中message變化的。

computed: {
  messageT() {
    return this.message + '!';
  }
}

圖示如下：一個屬性可能有多個依賴，每個響應式數據都有一個Dep來管理它的依賴。

如何收集依賴

我們如何知道data中的某個屬性被使用了，答案就是Object.defineProperty，因為讀取某個屬性就會觸發get方法。可以將代碼進行如下改造：

function defineReactive (obj, key, val) {
  let Dep; // 依賴

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: () => {
      console.log('我被讀了，我要不要做點什么好?');
      // 被讀取了，將這個依賴收集起來
      Dep.depend(); // 本次新增
      return val;
    },
    set: newVal => {
      if (val === newVal) {
        return;
      }
      val = newVal;
      // 被改變了，通知依賴去更新
      Dep.notify(); // 本次新增
      console.log("數據被改變了，我要把新的值渲染到頁面上去!");
    }
  })
}

什么是依賴

那所謂的依賴究竟是什么呢？上面的圖中已經暴露了答案，就是Watcher。

Watcher 「中介」

Watcher就是類似中介的角色，比如message就有三個中介，當message變化，就通知這三個中介，他們就去執行各自需要做的變化。

Watcher能夠控制自己屬于哪個，是data中的屬性的還是watch，或者是computed，Watcher自己有統一的更新入口，只要你通知它，就會執行對應的更新方法。

因此我們可以推測出，Watcher必須要有的2個方法。一個就是通知變化，另一個就是被收集起來到Dep中去。

class Watcher {
  addDep() {
    // 我這個Watcher要被塞到Dep里去了~~
  },
  update() {
    // Dep通知我更新呢~~
  }, 
}

以上是“Vue響應式原理Observer、Dep、Watcher的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！