vue源码解析pdf_Vue源码逐行解析九 initInjections函数（初始化Inject参数）

首先我们打开'src/core/instance/inject.js'文件，代码如下：

export function initInjections (vm: Component) {  const result = resolveInject(vm.$options.inject, vm)  if (result) {    toggleObserving(false)    Object.keys(result).forEach(key => {      /* istanbul ignore else */      if (process.env.NODE_ENV !== 'production') {        defineReactive(vm, key, result[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          )        })      } else {        defineReactive(vm, key, result[key])      }    })    toggleObserving(true)  }}

我们来具体看看代码分析。

 const result = resolveInject(vm.$options.inject, vm)

调用 "resolveInject" 函数处理 “inject” 参数。

 toggleObserving(false)

禁用组件的更新计算。

defineReactive(vm, key, result[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  )})

禁止 “inject” 的改动，否则开发环境会提示 "warn"

我们再来看看resolveInject函数的代码。

export function resolveInject (inject: any, vm: Component): ?Object {  if (inject) {    // inject is :any because flow is not smart enough to figure out cached    const result = Object.create(null)    const keys = hasSymbol      ? Reflect.ownKeys(inject)      : Object.keys(inject)    for (let i = 0; i < keys.length; i++) {      const key = keys[i]      // #6574 in case the inject object is observed...      if (key === '__ob__') continue      const provideKey = inject[key].from      let source = vm      while (source) {        if (source._provided && hasOwn(source._provided, provideKey)) {          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  }}

这个函数的代码也比较简单，我们一起看看。

  if (key === '__ob__') continue

键名不能是 “__ob__”，因为会和vue的内部属性冲突。

 while (source) {   if (source._provided && hasOwn(source._provided, provideKey)) {     result[key] = source._provided[provideKey]     break   }   source = source.$parent }

这里是一个while循环，会一直往上查找父级的 "_provided"，知道查找到最顶层的。

 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)   } }

如果 "source" 不存在的话，就获取默认的 "default" 的值，如果 "default" 是函数的话，就调用当前函数。

最后返回 "result"。