Vue 2.0 深入源碼分析(八) 基礎篇依賴註入 provide/inject組合詳解

用法先來看看官網的介紹: 簡單的說，當組件的引入層次過多，我們的子孫組件想要獲取祖先組件的資源，那麼怎麼辦呢，總不能一直取父級往上吧，而且這樣代碼結構容易混亂。這個就是這對選項要乾的事情 provide和inject需要配合使用，它們的含義如下: provide ;一個對象或返回一個對象的函數，該 ...

先來看看官網的介紹:

簡單的說，當組件的引入層次過多，我們的子孫組件想要獲取祖先組件的資源，那麼怎麼辦呢，總不能一直取父級往上吧，而且這樣代碼結構容易混亂。這個就是這對選項要乾的事情

provide和inject需要配合使用，它們的含義如下:

provide       ;一個對象或返回一個對象的函數，該對象包含可註入起子孫的屬性，可以使用ES6的Symbols作為key(只有原生支持Symbol才可以)
inject       　;一個字元串數組或一個對象
           　　　　;字元串數組   ;provide對象里哪些屬性可用
　　　　           ;一個對象 ;key是本地的綁定名，value是provide里對應的對象名，也可以是一個對象，此時from屬性是provide里對應的對象名，default屬性是不存在時的預設值

來個例子理解一下

<!DOCTYPE html>   　　<!--例1-->　　　　
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <title>Document</title>    
</head>
<body>
    <div id="app"><child></child></div>
    <script>
        Vue.component('child',{
            inject:['message'],
            template:'<p>{{message}}</p>'
        })
        new Vue({
            el:'#app',provide:{message:'Hello Vue!'}
        })
    </script>
</body>
</html>

輸出:Hello Vue!,對應的DOM節點渲染為:

是不是感覺和props的傳值差不多，當然這不是 provide/inject該乾的事情，我們在中間再嵌套一層組件就知道他的用處了，例如:

<!DOCTYPE html> 　　<!--例2-->　　　　
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
    <div id="app"><test></test></div>
    <script>
        Vue.component('child',{
            inject:['message'],
            template:'<p>{{message}}</p>'
        })
        Vue.component('test',{
            template:`<div><child></child></div>`
        })
        new Vue({
            el:'#app',provide:{message:'Hello Vue!'}
        })
    </script>
</body>
</html>

輸出:Hello Vue!,對應的DOM節點渲染為:

provide/injec就是做這個用的，多層嵌套時用起來不要太爽噢

源碼分析

provide/inject組合的源碼分為三個部分，分別是組件註冊、Vue實例化和組件實例化的過程，如下:

組件註冊時

註冊時會執行Vue.extend()(第4770行)，內部會執行mergeOptions()合併一些屬性,mergeOptions如下:

function mergeOptions (   //第1451行
  parent,
  child,
  vm
) {
  {
    checkComponents(child);
  }

  if (typeof child === 'function') {
    child = child.options;
  }

  normalizeProps(child, vm);
  normalizeInject(child, vm);         //對inject進行一次規範化
  normalizeDirectives(child);
  var extendsFrom = child.extends;
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm);
  }
  if (child.mixins) {
    for (var i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm);
    }
  }
  var options = {};
  var key;
  for (key in parent) {
    mergeField(key);
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key);
    }
  }
  function mergeField (key) {
    var strat = strats[key] || defaultStrat;
    options[key] = strat(parent[key], child[key], vm, key);
  }
  return options
}

normalizeInject定義如下:

function normalizeInject (options, vm) {  //第1398行
  var inject = options.inject;
  if (!inject) { return }
  var normalized = options.inject = {};
  if (Array.isArray(inject)) {                      //如果inject是一個數組
    for (var i = 0; i < inject.length; i++) {           //遍歷inject
      normalized[inject[i]] = { from: inject[i] };        //保存到normalized裡面，例如:{foo: {from: "foo"}}
    }
  } else if (isPlainObject(inject)) {               //如果inject是一個對象
    for (var key in inject) {
      var val = inject[key];
      normalized[key] = isPlainObject(val)
        ? extend({ from: key }, val)
        : { from: val };
    }
  } else {
    warn(
      "Invalid value for option \"inject\": expected an Array or an Object, " +
      "but got " + (toRawType(inject)) + ".",
      vm
    );
  }
}

對於例1來說，mergeOptions()之後inject等於:{message: {from: "message"}},如下:

Vue實例化時

執行_init()時會執行mergeOptions()進行數據的合併，對於provide的合併策略等於mergeDataOrFn()函數(和data的合併策略是一樣的，定義在1321行),返回一個匿名函數(第1154行)，如下:

function mergeDataOrFn (    //第1154行
  parentVal,
  childVal,
  vm
) {
  if (!vm) {                    //這是組件的分支
    // in a Vue.extend merge, both should be functions
    if (!childVal) {
      return parentVal
    }
    if (!parentVal) {
      return childVal
    }
    // when parentVal & childVal are both present,
    // we need to return a function that returns the
    // merged result of both functions... no need to
    // check if parentVal is a function here because
    // it has to be a function to pass previous merges.
    return function mergedDataFn () {
      return mergeData(
        typeof childVal === 'function' ? childVal.call(this, this) : childVal,
        typeof parentVal === 'function' ? parentVal.call(this, this) : parentVal
      )
    }
  } else {                    //這是非組件的實例，返回一個函數
    return function mergedInstanceDataFn () {
      // instance merge
      var instanceData = typeof childVal === 'function'
        ? childVal.call(vm, vm)
        : childVal;
      var defaultData = typeof parentVal === 'function'
        ? parentVal.call(vm, vm)
        : parentVal;
      if (instanceData) {
        return mergeData(instanceData, defaultData)
      } else {
        return defaultData
      }
    }
  }
}

然後返回到_init()之後會調用initProvide()初始化provide:

function initProvide (vm) {     //第3619行
  var provide = vm.$options.provide;                //嘗試獲取provide
  if (provide) {                                    //如果provide存在,當它是函數時執行該返回，否則直接將provide保存到Vue實例的_provided屬性上
    vm._provided = typeof provide === 'function' 
      ? provide.call(vm)
      : provide;
  }
}

返回後_provided等於{message:"Hello Vue!"}，如下

組件實例化時

_init()時會執行initInjections()，經過了前面兩步的處理，這裡比較簡單了，直接從父Vue或父Vue的父Vue獲取對應的值即可，如下:

function initInjections (vm) {      //第2681行 初始化inject
  var result = resolveInject(vm.$options.inject, vm);         //遍歷祖先節點，獲取對應的inject,例如:比如:{foo: "bar"}
  if (result) {                                               //如果獲取了對應的值，則將它變成響應式
    toggleObserving(false);
    Object.keys(result).forEach(function (key) {
      /* istanbul ignore else */
      {
        defineReactive(vm, key, result[key], function () { 　　//將key編程響應式，這樣就可以訪問該元素了
          warn(
            "Avoid mutating an injected value directly since the changes will be " +
            "overwritten whenever the provided component re-renders. " +
            "injection being mutated: \"" + key + "\"",
            vm
          );
        });
      }
    });
    toggleObserving(true);
  }
}

function resolveInject (inject, vm) {           //第3649行 確定Inject inject:例如:{foo: {from: "foo"}} vm:當前組件的實例
  if (inject) {                                                   //如果inject非空
    // inject is :any because flow is not smart enough to figure out cached
    var result = Object.create(null);                             //存儲最後的結果
    var keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(function (key) {                   //如果有符號類型，調用Reflect.ownKeys()返回所有的key，再調用filter
        /* istanbul ignore next */
        return Object.getOwnPropertyDescriptor(inject, key).enumerable
      })
      : Object.keys(inject);                                              //獲取所有的key，此時keys就是個字元串數組,比如:["foo"]

    for (var i = 0; i < keys.length; i++) {                               //這裡遍歷每個key
      var key = keys[i];
      var provideKey = inject[key].from;
      var source = vm;
      while (source) {
        if (source._provided && hasOwn(source._provided, provideKey)) {   //如果source存在_provided 且 含有provideKey這個屬性
          result[key] = source._provided[provideKey];                         //則將值保存到result[key]中
          break                                                               //並跳出while迴圈
        }
        source = source.$parent;                                          //否則將source賦值給父Vue實例，直到找到對應的providekey為止
      }
      if (!source) {                                                      //如果最後source不存在，即沒有從當前實例或祖先實例的_provide找到privideKey這個key
        if ('default' in inject[key]) {
          var provideDefault = inject[key].default;                          //如果有定義defult,則使用預設值
          result[key] = typeof provideDefault === 'function'
            ? provideDefault.call(vm)
            : provideDefault;
        } else {
          warn(("Injection \"" + key + "\" not found"), vm);
        }
      }
    }
    return result                                                       //返回結果，比如:{foo: "bar"}
  }
}

註:provide 和 inject 綁定並不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的。

Vue 2.0 深入源碼分析(八) 基礎篇 依賴註入 provide/inject組合詳解

Vue 2.0 深入源碼分析(八) 基礎篇依賴註入 provide/inject組合詳解