開篇

最近在學習Vue的源碼，看了網上一些大神的博客，看起來感覺還是蠻吃力的。自己記錄一下學習的理解，希望能夠達到簡單易懂，不看源碼也能理解的效果😆

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這個鉤子，讓它去執行回調函數。