如果你覺得排版難看，請點選 下面連結 或者 拉到 下面關注公眾號也可以吧

【Vue原理】Props - 原始碼版

今天記錄 Props 原始碼流程，哎，這東西，就算是研究過了，也真是會隨著時間慢慢忘記的。

幸好我做了詳細的文章，忘記了什麼的，回憶起來必然是很快的。

好的，回到正題，Props

請你在讀這篇之前，先去看看我的白話版

【Vue原理】Props - 白話版

在上面這篇文章中，也已經清楚地解決了一個問題

父元件 如何 把資料 當做 props 傳給子元件

所以今天，我們只需記錄 Props 的處理流程原始碼即可

---

初始化

在建立Vue例項的過程中，會呼叫 initState 處理options，比如 props，computed，watch 等

只要你 new Vue 建立例項之後，很快就會處理options

function Vue(){
    ... 其他處理
    initState(this)

    ...解析模板，生成DOM 插入頁面

}

function initState(vm) {    

    var opts = vm.$options;    

    if (opts.props) {

        initProps(vm, opts.props);
    }

    ... 處理 computed，watch，methods 等其他options

}

initProps

你看到處理 Props ，主要用到了一個方法 initProps，他就是本場的焦點了，讓我們來採訪下原始碼本碼

function initProps(vm, propsOpt) {    
   // 這是父元件給子元件傳入的 props 的具體值

   var propsData = vm.$options.propsData || {};    

   var props = vm._props = {};    

   for (var key in propsOpt){        

       // 給 props 的 key 設定 響應式

       defineReactive(props, key,  propsData[key]);        

       if (! (key in vm)) {            

           // 轉接訪問，訪問 vm 屬性，轉到訪問 vm._props 屬性
           proxy(vm, "_props", key);
       }
   }
}
 

上面的程式碼主要做了三件事

1、遍歷 props

2、給 props 設定響應式

3、給 props 設定代理

我們主要講兩件事

1、給 props 設定響應式

defineReactive(props, key,  propsData[key])

defineReactive 在這裡就不給太多原始碼了，你只需要記住他就是給 props 設定響應式的

function defineReactive(obj, key) {    

    Object.defineProperty(obj, key, {  

        get() { ...依賴收集 },
        set(newVal) { ....依賴更新 }
    });
}

如果你想了解響應式，就可以看我這篇文章

【Vue原理】響應式原理 - 白話版

Props 設定響應式，也是旨在資料改變時動態更新。

怎麼設定響應式嗎？看這裡

【Vue原理】依賴收集 - 原始碼版之基本資料型別

【Vue原理】依賴收集 - 原始碼版之引用資料型別

資料是直接從 父元件上傳過來的，沒有進行拷貝等處理，原樣傳過來

怎麼傳的？也可以看

【Vue原理】Props - 白話版

如果props 是基本型別

在 子元件例項上設定這個 props 屬性為響應式，跟 data 本質一樣，作用是監聽 props 修改

如果 props 是物件

也會在 子元件例項上 設定這個 props 屬性為響應式，作用也是監聽 props 修改

但是！

【不會遞迴物件】給物件內所有屬性設定響應式，因為該物件【已經在父元件中】完成響應式設定了

也就是說

如果你在 子元件中直接修改 props 物件內的資料，父元件也會跟著修改

在記錄的途中，我發現了一個問題，發現沒有想象中的那麼簡單，所以現在鄭重記錄

當 父元件資料 改變，子元件怎麼更新？

分型別的，說得比較詳細，可能有點繞？

1、 如果是基本型別，是這個流程

父元件資料改變，只會把新的資料傳給子元件

子元件拿到新資料，就會直接替換到原來的 props

替換就是直接等哈，看下原始碼，重要語句標紅

updateChildComponent 是子元件內部更新時會呼叫到的一個函式,這是其中更新 props 的一個片段

function updateChildComponent(

    vm, propsData

) {    

    if (propsData && vm.$options.props) {        

      // 儲存 props 的地方，用於訪問轉接，具體看文章下面

      var props = vm._props;        

      // 所有子元件上設定的 props 的 key

      var propKeys = vm.$options._propKeys || [];        

      for (var i = 0; i < propKeys.length; i++) {            

        var key = propKeys[i];

        props[key] = propsData[key]
      }
     vm.$options.propsData = propsData;
   }
}

而 props 在子元件中也是響應式的，【直接 等號 替換】導致觸發 set，set 再通知 子元件完成更新

資料是 基本型別，然後設定定時器修改資料

watcher1 是父元件，watcher2 是子元件

父元件內的 data num 通知 watcher1 更新 子元件內的 props child_num 通知 watcher2 更新

2、如果是物件，是這個流程

條件

父元件傳 物件 給 子元件，並且父子元件 頁面都使用到了這個資料

結果

那麼這個物件，會收集到 父子元件的 watcher

所以

當 物件內部被修改的時候，會通知到 父和子 更新。

例子

父元件設定 obj 物件，並傳給子元件

定時修改父元件資料 obj.name ，可以看到是 obj.name 通知 父子更新

當然，如果物件被整個替換了，而不是修改內部，那麼跟 基本型別一樣

區別是什麼？

1、基本型別是，子元件內部 props 通知 子元件更新的

2、引用型別是，父元件的資料 data 通知 子元件更新的

2、給 props 設定代理

在白話版中，我已經說得很清楚了， Props 有個移花接木的暗箱操作，就是訪問轉移

Data 也是這麼做的

【Vue原理】代理 Data - 原始碼版

你在專案中，會使用 http://this.xxx去訪問 props，props 已經當成了 例項的屬性，所以可以直接訪問

但是其實你訪問的是 【this._props.xxx】

為什麼 Vue 要這麼弄，目的就是為了方便開發啊，讓我們直接簡短了相關程式碼

而 React，訪問 props，還要 this.props.xxxx，寫這麼長，不嫌麻煩嗎?

那麼，是怎麼設定代理的呢，就是下面這行

proxy(vm, "_props", key);

proxy 是什麼也不要急，瓜就在下面，拿凳坐好

function proxy(

    target, sourceKey, key

) {    

  Object.defineProperty(target, key, {

      get() {            

          return this[sourceKey][key]

      },

      set(val) {            

          this[sourceKey][key] = val;

      }
  });
}

這段程式碼做了2 個事

1、使用 props 在 vm 上佔位，使得可以通過 http://vm.xxx 的形式訪問到 props

2、設定 [Object.defineProperty] 的 get 和 set ，間接獲取和賦值 vm._props

所有訪問賦值 props，轉接到 vm._props 上，直觀如下圖

上個例項，方便大家看

說完收工

相關推薦