Vue.js の 2.2.0+ バージョンに Provide オプションと Inject オプションを追加しました。これらはペアで表示され、親コンポーネントからデータを渡すために使用されます。 2.2.0+ 版本中添加加了 provide 和 inject 选项。他们成对出现，用于父级组件向下传递数据。

源码位置

和之前一样，初始化的方法都是在 Vue 的 _init 方法中的。

  // src/core/instance/init.js
  Vue.prototype._init = function (options?: Object) {
    ……
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, &#39;beforeCreate&#39;)
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, &#39;created&#39;)
  }

ログイン後にコピー

这里找到 initInjections 和 initProvide 方法，这就是 provide 和 inject 的初始化方法了。这两个方法都是在 src/core/instance/inject.js 中。

provide

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。在该对象中你可以使用 ES2015 Symbols 作为 key，但是只在原生支持 Symbol 和 Reflect.ownKeys 的环境下可工作。

先看源码：

// src/core/instance/inject.jsexport function initProvide (vm: Component) {
  const provide = vm.$options.provide  if (provide) {
    vm._provided = typeof provide === &#39;function&#39;
      ? provide.call(vm)
      : provide
  }
}

ログイン後にコピー

provide 是向下传递数据的选项。这里先拿到 provide 选项中的内容，如果有 provide 选项，将 provide 选项传递给 vm._provided 变为 Vue 实例全局数据。
这里看一下例子更清楚，下例中传入数据 foo，数据内容为 bar。

var Provider = {
  provide: {
    foo: &#39;bar&#39;
  },  // ...}

ログイン後にコピー

inject

inject 选项应该是一个字符串数组或一个对象，该对象的 key 代表了本地绑定的名称，value 为其 key (字符串或 Symbol) 以在可用的注入中搜索。

源码

// src/core/instance/inject.jsexport function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)  if (result) {
    observerState.shouldConvert = false
    Object.keys(result).forEach(key => {
      defineReactive(vm, key, result[key])
    })
    observerState.shouldConvert = true
  }
}

ログイン後にコピー

简化后的源码可以看到，首先通过 resolveInject 方法获取 inject 选项搜索结果，如果有搜索结果，遍历搜索结果并为其中的数据添加 setter 和 getter。
接着来看下 resolveInject 方法：

export function resolveInject (inject: any, vm: Component): ?Object {
  if (inject) {    // inject 是 :any 类型因为流没有智能到能够指出缓存
    const result = Object.create(null)    // 获取 inject 选项的 key 数组
    const keys = hasSymbol
      ? Reflect.ownKeys(inject).filter(key => {        /* istanbul ignore next */
        return Object.getOwnPropertyDescriptor(inject, key).enumerable
      })
      : Object.keys(inject)    for (let i = 0; i < keys.length; i++) {      const key = keys[i]      const provideKey = inject[key].from      let source = vm      while (source) {        if (source._provided && provideKey in source._provided) {
          result[key] = source._provided[provideKey]          break
        }
        source = source.$parent
      }      if (!source) {        if (&#39;default&#39; in inject[key]) {          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === &#39;function&#39;
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== &#39;production&#39;) {
          warn(`Injection "${key}" not found`, vm)
        }
      }
    }    return result
  }
}

ログイン後にコピー

获取 inject 选项的 key 数组，遍历 key 数组，通过向上冒泡来查找 provide 中是否有 key 与 inject 选项中 from 属性同名的，如果有，则将这个数据传递给 result；如果没有，检查 inject 是否有 default 选项设定默认值或者默认方法，如果有则将默认值返传给 result，最终返回 result 对象。
所以，inject 的写法应该是有 default 默认值的：

const Child = {
  inject: {
    foo: { default: &#39;foo&#39; }
  }
}

ログイン後にコピー

或者是有 from 查找键和 default 默认值的：

const Child = {
  inject: {
    foo: {
      from: &#39;bar&#39;,      default: &#39;foo&#39;
    }
  }
}

ログイン後にコピー

或者为 default 默认值设定一个工厂方法：

const Child = {
  inject: {
    foo: {
      from: &#39;bar&#39;,      default: () => [1, 2, 3]
    }
  }
}

ログイン後にコピー

好吧，我承认这就是引用的官网的三个例子~ 不过意思到就好啦。
这里我有个疑问，既然在源码中主动去识别了 from 和 default，官网上说是

在 2.5.0+ 的注入可以通过设置默认值使其变成可选项：

那么如下写法还可用吗？

var Child = {
  inject: [&#39;foo&#39;],
  created () {
    console.log(this.foo) // => "bar"
  }  // ...}

ログイン後にコピー

为此，我们去查查 2.2.0 版本的Vue是怎么写的？

export function initInjections (vm: Component) {
  const provide = vm.$options.provide  const inject: any = vm.$options.inject  if (provide) {
    vm._provided = typeof provide === &#39;function&#39;
      ? provide.call(vm)
      : provide
  }  if (inject) {    // inject is :any because flow is not smart enough to figure out cached
    // isArray here
    const isArray = Array.isArray(inject)    const keys = isArray
      ? inject
      : hasSymbol
        ? Reflect.ownKeys(inject)
        : Object.keys(inject)    for (let i = 0; i < keys.length; i++) {      const key = keys[i]      const provideKey = isArray ? key : inject[key]      let source = vm      while (source) {        if (source._provided && source._provided[provideKey]) {
          vm[key] = source._provided[provideKey]          break
        }
        source = source.$parent
      }
    }
  }
}

ログイン後にコピー

从中可以看到，在这个版本 provide 和 inject 是一起初始化的。之后，将 provide 传给 vm._provide ，在获取 inject 选项的时候代码判断了 inject 是否为数组，如果是数组直接遍历数组，之后查找 provide 的代码差不多。
所以我推测： 在 2.5.0+

ソースコードの場所

前と同様、初期化メソッドは Vue の _init メソッドにあります。
rrreee

ここで initInjections メソッドと initProvide メソッドを見つけます。これは、provide と inject の初期化メソッドです。どちらのメソッドも src/core/instance/inject.js にあります。 🎜

provide

🎜provide オプションは、オブジェクト、またはオブジェクトを返す関数である必要があります。このオブジェクトには、その子孫に注入できるプロパティが含まれています。 ES2015 シンボルをこのオブジェクトのキーとして使用できますが、これは Symbol と Reflect.ownKeys がネイティブにサポートされている環境でのみ機能します。 🎜

🎜まずソースコードを見てください: 🎜rrreee🎜provide はデータを下方に渡すオプションです。ここではまず、provide オプションのコンテンツを取得します。provide オプションがある場合は、provide オプションを vm._provided に渡して、Vue インスタンスのグローバルデータとします。 🎜わかりやすくするために、次の例を見てください。次の例では、データ foo が渡され、データの内容は bar です。 🎜rrreee

inject

🎜inject オプションは文字列配列またはオブジェクトである必要があります。オブジェクトのキーはローカルバインディングの名前を表し、値はそのキー (文字列またはシンボル) です。利用可能な注射器の中から検索してください。 🎜

🎜ソースコード🎜rrreee🎜 まず、resolveInject メソッドで挿入オプションの検索結果を取得し、検索結果を走査します。データとゲッターにセッターを追加します。 🎜次に、resolveInject メソッドを見てみましょう: 🎜rrreee🎜 inject オプションのキー配列を取得し、キー配列を走査し、バブルアップして、provide に同じ名前のキーがあるかどうかを確認します。 inject オプションの from 属性。はいの場合は、このデータを result に渡します。そうでない場合は、inject にデフォルト値またはデフォルトのメソッドを設定するオプションがあるかどうかを確認し、最後にデフォルト値を result に返します。結果オブジェクトを返します。 🎜したがって、inject はデフォルト値で記述する必要があります: 🎜rrreee🎜 または from 検索キーとデフォルト値を使用して: 🎜rrreee🎜 またはデフォルト値のファクトリメソッドを設定します: 🎜rrreee🎜 さて、これらが次のとおりであることは認めます。公式ウェブサイトから引用した 3 つの例 ~ でも、それは理にかなっているというだけです。 🎜ここで質問があります。fromとdefaultはソースコード内で積極的に識別されているため、公式Webサイトには🎜

🎜2.5.0+のインジェクションはデフォルト値を設定することで変更できます。 . はオプションになります: 🎜

🎜では、次の記述方法はまだ利用可能ですか? 🎜rrreee🎜 このため、Vue の 2.2.0 バージョンがどのように記述されているかを確認してみましょう。 🎜rrreee🎜 ご覧のとおり、このバージョンでは、provide と inject が一緒に初期化されます。その後、provide が vm._provide に渡されます。inject オプションを取得するときに、コードは inject が配列であるかどうかを判断し、配列を直接走査し、provide を見つけるコードはほぼ同じです。。 🎜そこで私は推測します。2.5.0+ 以降では、provide の検索に配列形式での inject を使用できなくなりました。 🎜🎜🎜

以上がVue.js ソースコード学習の提供と挿入の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。