Vue 3.0 Provide和Inject实现共享数据

最新推荐文章于 2024-09-19 16:04:26 发布

JonnyLan

最新推荐文章于 2024-09-19 16:04:26 发布

阅读量736

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/lcl130/article/details/122679207

版权

Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言，Provide和Inject传值更方便，相比vuex又更轻量。

接下来我们就从使用和实现原理两方面来介绍Provide和Inject。

`Provide`和`Inject`的使用

概括: 祖(父)组件中使用一个provide函数来提供数据，而子(孙)组件使用inject函数来获取数据。

`provide` API 的使用

我们这里就用官方的例子，阅读过官方例子的童鞋可以跳过本节。

使用前需要先从vue中引用provide函数

import { provide } from "vue";

使用插件后，在敲完provide代码后编辑器(例如VS Code)可以自动引入这个函数，不需要手动引入。这里只是为了说明。

在setup函数中调用provide函数提供数据

<!-- GrandParent.vue -->
setup() {
    // 省略其他...
    provide('location', '北极')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
}

provide有两个参数:第一个参数表示字符串类型的key;第二个参数为value,可以是对象，也可以是普通数据类型.

`inject` API 的使用

使用前需要先从vue中引用inject函数

import { inject } from "vue";

在setup函数中调用inject函数获取数据

<!-- GrandSon.vue -->
setup() {
    // 省略其他...
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    
  },

inject也有两个参数:第一个参数表示需要获取的key;第二个参数为key未取到值时候填充的的默认值(非必选参数)。如果没有设置默认值，则没有取到值则为undefined。

为`provide`添加响应性

添加响应性是指provide提供的数据发生变化时，inject使用数据的组件需要进行刷新界面。我们想到肯定得需要Vue3.0的一些响应式的API。

修改后的provide样子如下:

<!-- GrandParent.vue -->
setup() {
    // 省略其他...
    provide('location', ref('北极'))
    provide('geolocation', reactive({
      longitude: 90,
      latitude: 135
    }))
}

inject的使用没有差别，但是如果使用inject的组件模板中用到provide提供的数据，则组件会及时进行UI刷新。

`Provide`和`Inject`的原理分析

传值

组件实例对象ComponentInternalInstance有一个provides属性;

<!-- components.ts -->
export interface ComponentInternalInstance {
  **
   * Object containing values this component provides for its descendents
   * @internal
   */
  provides: Data
}

在创建组件实例对象时候，provides属性会指向父组件实例对象的provides属性;

export function createComponentInstance(
  vnode: VNode,
  parent: ComponentInternalInstance | null,
  suspense: SuspenseBoundary | null
) {

  const instance: ComponentInternalInstance = {
    // 省略其他属性...
    provides: parent ? parent.provides : Object.create(appContext.provides),
  }
  
  return instance
}

根实例对象的provides是Object.create(null),也就是纯净的空对象{}.

当所有组件都没有使用provide函数时, 效果如下图所示：

在组件实例调用provide函数时，会将父组件的provides为模板拷贝一份做为当前组件的provides，不再指向父组件的provides，然就将provide中的key和value对应保存起来;

export function provide<T>(key: InjectionKey<T> | string | number, value: T) {
  let provides = currentInstance.provides
  const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
  // 如果指向父组件的`provides`对象则拷贝一份
  if (parentProvides === provides) {
    provides = currentInstance.provides = Object.create(parentProvides)
  }
  // 将`provide`的`key`和`value`对应保存起来
  provides[key as string] = value
}

当某个组件有使用provide函数时, 效果如下图所示：

思考题: 如果(祖)父和子(孙)组件provide函数使用了相同的key来提供数据，那他们的共同子(孙)组件用inject函数获取到的数据value是哪个值呢？

答案：很明显是离组件自身最近的(祖)父组件的provide提供的value。

inject函数的逻辑就非常简单了，就是取当前组件实例的provides对象对应key的value, 如果没取到value就用默认值defaultValue，如果没有默认值defaultValue结果就是undefined;

function inject(key, defaultValue, treatDefaultAsFactory = false) {
  const instance = currentInstance || currentRenderingInstance;
  if (instance) {
      // 取值
      const provides = instance.parent == null
          ? instance.vnode.appContext && instance.vnode.appContext.provides
          : instance.parent.provides;
      if (provides && key in provides) {
          return provides[key];
      }
      else if (arguments.length > 1) {
          return treatDefaultAsFactory && isFunction(defaultValue)
              ? defaultValue.call(instance.proxy)
              : defaultValue;
      }
  }
}