Vue 2源码阅读 Provide Inject 依赖注入详解

 更新时间:2022年08月26日 10:12:49   作者:MiyueFE  
这篇文章主要为大家介绍了Vue 2源码阅读 Provide Inject 依赖注入详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

Provide/Inject 初始化

1. initInjections 依赖初始化

该步骤其实发生在 initState 之前,但是由于 provide/inject 一般是配合使用,所以这里调整了一下顺序。

该函数的定义与过程都比较简单:

export function initInjections(vm: Component) {
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    toggleObserving(false)
    Object.keys(result).forEach(key => {
      if (__DEV__) {
        defineReactive(vm, key, result[key], () => warn(''))
      } else {
        defineReactive(vm, key, result[key])
      }
    })
    toggleObserving(true)
  }
}
export function resolveInject(inject: any, vm: Component): Record<string, any> | undefined | null {
  if (inject) {
    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]
      if (key === '__ob__') continue
      const provideKey = inject[key].from
      if (provideKey in vm._provided) {
        result[key] = vm._provided[provideKey]
      } else if ('default' in inject[key]) {
        const provideDefault = inject[key].default
        result[key] = isFunction(provideDefault) ? provideDefault.call(vm) : provideDefault
      } else if (__DEV__) {
        warn('')
      }
    }
    return result
  }
}
  • 在 initInjections 函数中,只是遍历了 options.inject 配置的依赖数据,并 关闭 了依赖数据的 响应式依赖收集,最后通过 defineReactive 将对应的数据挂载到实例 vm 上,以便后面能直接访问。

这就是官方提示的 为什么 provide/inject 的数据不是响应式的了。

  • 而 resolveInject 函数就是用来对组件的 inject 依赖数据进行处理,并返回一个没有多余原型链的对象。

在官方文档中,inject 接收一个字符串数组或者一个 key 为 string 的对象,而作为对象时则 必须 有 from 字段来表示依赖数据的获取指向,另外也接收一个 default 属性作为降级时使用的默认值。

但是,在 mergeOptions 之后,会将 options.inject 转为标准对象格式。

并且这里并没有对注入数据 provide[key] 进行处理,而是直接赋值;所以才有:如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

resolveInject() 函数就是解析标准格式 inject 配置,并将上层组件的 provide 的值或者 default 默认值绑定到函数返回对象中;如果这两个都没有,则会提示错误信息 “injection xx not found”

2. initProvide 注入数据初始化

初始化注入数据的过程也很简单,整个过程其实与 initInjection 类似。其函数定义如下:

export function initProvide(vm: Component) {
  const provideOption = vm.$options.provide
  if (provideOption) {
    const provided = isFunction(provideOption) ? provideOption.call(vm) : provideOption
    if (!isObject(provided)) {
      return
    }
    const source = resolveProvided(vm)
    
    const keys = hasSymbol ? Reflect.ownKeys(provided) : Object.keys(provided)
    for (let i = 0; i < keys.length; i++) {
      const key = keys[i]
      Object.defineProperty(
        source,
        key,
        Object.getOwnPropertyDescriptor(provided, key)!
      )
    }
  }
}
export function resolveProvided(vm: Component): Record<string, any> {
  const existing = vm._provided
  const parentProvides = vm.$parent && vm.$parent._provided
  if (parentProvides === existing) {
    return (vm._provided = Object.create(parentProvides))
  } else {
    return existing
  }
}

官方文档中对 provide 配置项的说明是,可以是一个对象或者一个返回对象的函数。

  • 所以这里首先判断了 options.provide 的类型并获取到了结果,如果结果 不是对象则会直接退出。
  • 然后,则是初始化 provide 的数据。

此时会将当前实例的 provided 数据与父组件实例的 provided 进行比较,如果相同,则返回一个 以父组件实例 provided 数据为原型创建的对象,否则直接返回当前实例的 provided 数据。

因为每一个实例都会进行与父组件实例的注入数据比较,所以才能多层级传递

  • 最后,则是遍历 provided 对象,通过 Object.defineProperty 来处理数据获取。

总结

整个 provide/inject 的初始化过程都很清晰,只是通过少数校验和处理,将 provide 数据一层一层传递下去,直到 inject 依赖时读该改数据的值;

并且因为在初始化时会关闭响应式处理部分,所以 provide/inject 的 直接绑定数据 才不支持响应式;但

又因为 没有对数据的进行深层次处理,所以,原有的响应式数据才会继续触发整个响应式系统的改变。

以上就是Vue 2源码阅读 Provide Inject 依赖注入详解的详细内容,更多关于Vue Provide Inject 依赖注入的资料请关注脚本之家其它相关文章!

相关文章

  • Vue中渲染系统模块的实现详解

    Vue中渲染系统模块的实现详解

    想要实现一个简洁版的Mini-Vue框架,应该包含三个模块:分别是:渲染系统模块、可响应式系统模块、应用程序入库模块,本文主要介绍的是渲染系统模块的实现,需要的可以参考一下
    2023-07-07
  • Vue中request.js封装及调用示例详解

    Vue中request.js封装及调用示例详解

    这篇文章主要为大家介绍了Vue中request.js封装及调用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • vue开发页面自适应屏幕尺寸的实例代码

    vue开发页面自适应屏幕尺寸的实例代码

    使用vue开发的页面都是通过px设置它的尺寸,如果换了一个不同尺寸的屏幕就会出现页面排版错乱,显示不完整等情况,下面通过插件将px装换为rem单位适应不同尺寸的屏幕,需要的朋友可以参考下
    2022-12-12
  • Vue 开发必须知道的36个技巧(小结)

    Vue 开发必须知道的36个技巧(小结)

    这篇文章主要介绍了Vue 开发必须知道的36个技巧(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • 关于vue中@click.native.prevent的说明

    关于vue中@click.native.prevent的说明

    这篇文章主要介绍了关于vue中@click.native.prevent的说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • Vue如何使用cdn加载资源加快打包速度

    Vue如何使用cdn加载资源加快打包速度

    外部的库文件,可以使用CDN资源,或者别的服务器资源等,下面这篇文章主要给大家介绍了关于Vue如何使用cdn加载资源加快打包速度的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vue之多项目|多工程共用相同组件的思路解读

    vue之多项目|多工程共用相同组件的思路解读

    这篇文章主要介绍了vue之多项目|多工程共用相同组件的思路,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue源码解析computed多次访问会有死循环原理

    vue源码解析computed多次访问会有死循环原理

    这篇文章主要为大家介绍了vue源码解析computed多次访问会有死循环原理,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 详解vue组件通信的三种方式

    详解vue组件通信的三种方式

    本篇文章主要介绍了详解vue组件通信的三种方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • vue前端页面数据加载添加loading效果的实现

    vue前端页面数据加载添加loading效果的实现

    这篇文章主要介绍了vue前端页面数据加载添加loading效果的实现方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07

最新评论