Vue.js 源码学习五 —— provide 和 inject 学习

早上好!继续开始学习Vue源码吧~

在 Vue.js 的 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, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')
  }

这里找到 initInjectionsinitProvide 方法,这就是 provideinject 的初始化方法了。这两个方法都是在 src/core/instance/inject.js 中。

provide

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

先看源码:

// src/core/instance/inject.js
export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

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

var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

inject

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

源码

// src/core/instance/inject.js
export 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 ('default' in inject[key]) {
          const provideDefault = inject[key].default
          result[key] = typeof provideDefault === 'function'
            ? provideDefault.call(vm)
            : provideDefault
        } else if (process.env.NODE_ENV !== 'production') {
          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: 'foo' }
  }
}

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

const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}

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

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

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

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

那么如下写法还可用吗?

var Child = {
  inject: ['foo'],
  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 === 'function'
      ? 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+ 之后不能再使用数组形式的 inject 来搜索 provide 了。
PS:这里没有去代码验证,如有问题,欢迎指出,谢谢!

最后

至此,provide 和 inject 的源码学习完毕啦~ 如果有任何问题和建议,欢迎联系我!谢谢!
预告:明天学习 Vue 的 VDOM、VNode 相关知识。欢迎继续关注~

Vue.js学习系列

鉴于前端知识碎片化严重,我希望能够系统化的整理出一套关于Vue的学习系列博客。

Vue.js学习系列项目地址

本文源码已收入到GitHub中,以供参考,当然能留下一个star更好啦^-^。
https://github.com/violetjack/VueStudyDemos

关于作者

VioletJack,高效学习前端工程师,喜欢研究提高效率的方法,也专注于Vue前端相关知识的学习、整理。
欢迎关注、点赞、评论留言~我将持续产出Vue相关优质内容。

新浪微博: http://weibo.com/u/2640909603
掘金:https://gold.xitu.io/user/571d953d39b0570068145cd1
CSDN: http://blog.csdn.net/violetjack0808
简书: http://www.jianshu.com/users/54ae4af3a98d/latest_articles
Github: https://github.com/violetjack

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值