从 Vue 源码学 provide/inject

时间  2021-08-12
标签 html vue git github web api 数组 markdown ide 函数 栏目 HTML 繁體版
原文   原文链接

一直对 Vue 的 provide/inject 的实现原理不是很清楚，致使平时工做中用的时候迷迷糊糊、模棱两可的。今天决定看一下源码，搞懂其中的机制，方便在工做中更流畅地使用。html

API用法

正如官网所述, 使用很简单:vue

  • provide：Object | () => Object
  • inject：Array<string> | { [key: string]: string | Symbol | Object }

父组件使用 provide 来向子组件提供值, provide 能够是对象，也能够是返回对象的方法:git

// 父组件
export default {
  provide: {
    name: '张三'
  }
}
复制代码

子组件使用 inject 来获取父组件提供的值并注入到组件内， inject 能够是字符串的数组，也能够是对象:github

// 子组件
export default {
  inject: {
    providedName: { from: 'name' }
  }
}
复制代码

而后就可使用该属性了:web

// 子组件
export default {
  inject: {
    providedName: { from: 'name' }
  },
  // 能够做为属性默认值
  props: {
    propsName: {
      default() { return this.providedName; }
    }
  },
  // 能够做为 data 的默认值
  data() {
    return {
      localName: this.providedName,
    }
  },
  created() {
    console.log(this.providedName);
  }
}
复制代码

用法其实很简单。可是有几点疑问:api

  • 父组件经过 provide 能够提供自身的属性和方法给后代吗？该怎么作呢？
  • 父组件经过 provide 提供的自身属性具备响应式吗？
  • 子组件经过 inject 注入的属性是在哪一个生命周期阶段注入的？

带着问题能够去阅读源码。数组

源码解析

我尚未系统地完整的阅读过 Vue 的源码，因此从工程中查找 provide/inject 相关的关键字找到了相关文件。markdown

格式化 inject

从 src/core/instance/index.js 文件中能够看到, 在调用 new Vue(options) 的时候会调用 this._init(options):ide

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

initMixin(Vue)
复制代码

而这个 _init 方法就是在 initMixin 添加到 Vue 原型上的方法。函数

在 src/core/instance/init.js 中能够看到源码，忽略其它信息能够看到以下代码：

vm.$options = mergeOptions(
  resolveConstructorOptions(vm.constructor), options || {}, vm
)
复制代码

顺藤摸瓜看一下 mergeOptions 方法里面的代码, 发现有一个 normalizeInject 的方法：

function normalizeInject (options: Object, vm: ?Component) {
  const inject = options.inject
  const normalized = options.inject = {}
  if (Array.isArray(inject)) {
    for (let i = 0; i < inject.length; i++) {
      normalized[inject[i]] = { from: inject[i] }
    }
  } else if (isPlainObject(inject)) {
    for (const key in inject) {
      const val = inject[key]
      normalized[key] = isPlainObject(val)
        ? extend({ from: key }, val)
        : { from: val }
    }
  } else if (process.env.NODE_ENV !== 'production' && inject) {
    warn(
      `Invalid value for option "inject": expected an Array or an Object, ` +
      `but got ${toRawType(inject)}.`,
      vm
    )
  }
}
复制代码

这个方法就是格式化 inject 的方法了，逻辑很简单，就是作以下几种转换:

  • inject 为 Array<string> 类型, 例如: 
    {
    inject: [ 'name' ]
  }
复制代码
    直接转换为： 
    {
    inject: {
      name: {
        from: 'name',
      }
    }
  }
复制代码
  • inject 为 Object 类型，且属性值为非普通对象,例如: 
    {
    inject: {
      name: 'name',
      name2: { default: '' }
    }
  }
复制代码
    转换为: 
    {
    inject: {
      name: {
        from: 'name'
      },
      name2: {
        from: 'name2',
        default: '',
      }
    }
  }
复制代码

综上，inject 最终会被格式化为以下格式，这个格式也是 inject 的标准格式

{
  inject: {
    [injectKey]: {
      from: 'providedKey',
      default: '默认值',
    }
  }
}
复制代码

初始化 inject 和 provide

接着看 src/core/instance/init.js 中的代码, 会发现初始化的代码：

initLifecycle(vm)
  initEvents(vm)
  initRender(vm)
  callHook(vm, 'beforeCreate')
  initInjections(vm) // resolve injections before data/props
  initState(vm) // 初始化 data、props、methods、computed、watch等
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created')
复制代码

忽略其它信息，能够看到 provide 与 inject 都是在 beforeCreate 和 created 之间初始化的。因此解答了 inject 是在哪一个阶段注入 这个问题。因此，若是咱们平常开发中能够在 created 钩子中获取注入的值，可是不能在 beforeCreate 中获取。

再看一下各个类型数据的初始化顺序:

  • initInject: 首先初始化 inject 的注入内容
  • initState: 而后初始化 vue 实例的各个资源，data、props、methods、computed、watch等
  • initProvide: 最后初始化 provide 信息

因此咱们能够获得另外一个问题的答案: 父组件经过 provide 是能够提供自身的属性和方法给后代的。

初始化 inject 的具体逻辑

继续点进 initInjections 方法看一下具体逻辑：

export function initInjections (vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  toggleObserving(false)
  Object.keys(result).forEach(key => {
    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(false)
}
复制代码

首先从咱们格式化过的 $options.inject 中解析出 inject 对象，即 result，这个没啥问题

而后关闭了 observe 的选项。这个是干什么的呢？ 经过点进 toggleObserving 函数能够看到是重置了 全局的一个变量：shouldObserve。

关闭它干啥呢？能够看一下 defineReactive 代码，在代码一开始的时候就会调用 observe 方法来观察一个对象:

// src/core/observer/index.js
export function defineReactive ( obj: Object, key: string, val: any, customSetter?: ?Function, shallow?: boolean ) {
  const dep = new Dep()
  // 其它代码
  let childOb = !shallow && observe(val)
}
复制代码

再看下 observe 的代码:

// src/core/observer/index.js
export function observe (value: any, asRootData: ?boolean): Observer | void {
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (shouldObserve) {
    ob = new Observer(value)
  }
  return ob
}
复制代码

建立 observer 的时候回检查 shouldObserve 的值，因此这里关闭了 shouldObserve, 咱们在用 defineReactive 给 Vue 实例定义响应式属性的时候，就没法观察一个对象了。

不具备响应式的 provide

根据以上，咱们能够得出结论: 经过 inject 注入的一个普通对象是不具有响应式的。 下面这个示例中,经过 changeName 改变 person.name 的值，是不会触发视图更新的。 由于对于 person 对象，没有使用 observe 方法为其建立 Observer。

// 父组件
const person = { name: '张三' }
export default {
  name: 'parent',
  provide: {
    person,
  },
  methods: {
    changeName() {
      person.name = '李四'
    }
  }
}
// 子组件
export default {
  name: 'child',
  inject: [ 'person' ]
}
复制代码

具备响应式的 provide

再看下面这个例子：

// 父组件
export default {
  name: 'parent',
  provide() {
    return {
      person: this.person,
    }
  },
  data() {
    return {
      person: { name: '张三' }
    }
  },
  methods: {
    changeName() {
      this.person.name = '李四'
    }
  }
}
// 子组件
export default {
  name: 'child',
  inject: [ 'person' ]
}
复制代码

而父组件提供一个具备响应式的对象给子组件，子组件获取到的值就是响应式的。经过 changeName 改变 person.name 的值，是会触发视图更新的。

因此这里也回答了另一个问题: 父组件经过 provide 提供的自身的响应式属性传给子组件后具备响应式的，可是提供的普通对象，是不具有响应式的。

其它API相关的具体逻辑

有兴趣的话，继续看一下 resolveInject 中的逻辑：

export function resolveInject (inject: any, vm: Component): ?Object {
  const result = Object.create(null)
  const keys = 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 值的 from 属性表示要从父级组件注入的属性。查找过程是逐级网上的，找到提供了 provide 的父级以后就再也不继续寻找，因此始终会注入最近一级的 provide 属性。

另外，从这里也可获得两个API用法：

  • 若是提供了 default ，在没有寻找到 provide 值时会使用 default 提供的值。
  • default 能够是函数，在函数中能够经过 this 访问组件实例。

可是，须要注意的是在 default 函数中经过 this 是访问不到 props、data 中的属性的，缘由上面也说了，inject 的初始化在 data等以前(因此这里的 this 貌似没什么用)。

初始化 provide 的具体逻辑

代码在 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 最终都转成对象存储起来，与上文的 result[key] = source._provided[provideKey] 相对应。 同时能够看出，若是给 provide 提供了一个方法的话，在方法里面是能够经过 this 来访问实例中的属性和方法的。这也就解决了 若是把实例中的数据经过 provide 提供给子组件 这个问题:

export default {
  provide() {
    return {
      name: this.name;
    }
  },
  data() {
    return {
      name: '',
    }
  }
}
复制代码

总结

下面整理一下具体的问题。

  1. 父组件经过 provide 能够提供自身的属性和方法给后代吗？ 能够。给 provide 设置一个方法，在方法中就能够经过 this 来访问 props,data,methods 等资源。

  2. 父组件经过 provide 提供的自身属性具备响应式吗？ 父组件提供的具备响应式的属性，注入子组件后是具备响应式的，可是提供的普通对象，不具有响应式功能。

  3. 子组件经过 inject 注入的属性是在哪一个生命周期阶段注入的？ 是在 beforeCreate 和 created 之间注入的。全部的顺序以下:

    1. 先初始化 injection
    2. 在初始化 data,props等，所以在 data,props中可使用 injection
    3. 而后在初始化 provide, 因此组件能够将自身的属性和数据提供给后代组件。

以上就是本文的所有内容了，感谢各位阅读，若是有任何疑问，欢迎留言。

转载请注明来源从 Vue 源码学 provide/inject

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程