你不知道的vue：使用runWithContext实现在非 setup 期间使用inject

前端欧阳

发布于 2024-04-24 15:53:29

660

发布于 2024-04-24 15:53:29

“原创不易，求分享、求一键三连

前言

日常开发时有些特殊的场景需要在非 setup 期间调用inject函数，比如app中使用provide注入的配置信息需要在发送http请求时带上传给后端。对此我们希望不在每个发起请求的地方去修改，而是在发起请求前的拦截进行统一处理，对此我们就需要在拦截请求的函数中使用inject拿到app注入的配置信息。

为什么只能在`setup` 期间调用`inject`函数

inject的用法大家应该都清楚，是一个用于注入依赖的函数，它可以将父组件或根组件 app 中通过 provide 提供的相同 key 的值注入到当前组件中。

我们先来看看简化后的provider和inject的源码，其实非常简单。

`provider`函数源码

我们先来看看简化后的provider函数源码，其实很简单：

export function provide(
  key,
  value,
) {
  //拿到当前组件的vue实例提供的provides对象
  let provides = currentInstance.provides
  //拿到父组件的vue实例提供的provides对象
  const parentProvides =
    currentInstance.parent && currentInstance.parent.provides
  // 如果父组件和当前组件的provides对象相等
  if (parentProvides === provides) {
    // 基于父组件的provides对象拷贝出一个新的对象
    provides = currentInstance.provides = Object.create(parentProvides)
  }
  // 如果provides对象中有相同的key，那么就会直接覆盖。
  provides[key] = value
}

在初始化一个vue实例的时候会将父组件的provides对象赋值给当前实例的provides对象，所以当第一次provide方法被调用后，会判断当前的provides对象是否等于父组件provides对象，如果相等就会基于父组件实例的provides对象拷贝一个新的provides对象。

此时父组件和子组件的provides对象经过Object.create(parentProvides)后就已经不是同一个对象了。如果子组件和父组件provide对象中都有相同的key，经过provides[key] = value后就会将原本父组件赋值的相同key的值“覆盖”掉。因为父组件的provides对象是从他的父组件provides对象拷贝的而来，所以子组件包含了父组件链上的所有的provide提供的值。

机智如你现在应该能够理解为什么官网会说“父组件链上多个组件对同一个 key 提供了值，那么离得更近的组件将会“覆盖”链上更远的组件所提供的值”。

`inject`函数源码

现在我们再来看看简化后的inject函数源码，同样也非常简单：

export function inject(
  key,
) {
  //currentInstance是一个存储当前vue实例的全局变量，在vue组件初始化时会赋值。
  //初始化完成后会被重置为null
  const instance = currentInstance

  if (instance || currentApp) {
    // 拿到父组件或者currentApp中提供的provides对象
    const provides = instance
      ? instance.parent.provides
      : currentApp!._context.provides
    // 从provides对象中拿到相同key的值
    if (provides && key in provides) {
      return provides[key]
    }
  } else if (__DEV__) {
    // 不是在setup中或者runWithContext中调用，就会发出警告
    warn(`inject() can only be used inside setup() or functional components.`)
  }
}

我们首先来看看currentInstance这个全局变量，setup只会在初始化vue实例的时候执行一次，在setup期间currentInstance会被赋值为当前组件的vue实例。等vue实例初始化完成后currentInstance就会被赋值为null。

前面我们已经介绍了组件的provides对象中是包含了父组件链上的所有provides的key，所以我们这里只需要从当前vue实例instance的parent中的provides对象中就可以取出注入相同key的值。

看到这里相信你已经知道了为什么只能在setup 期间调用调用inject方法了。因为只有在setup期间currentInstance全局变量的值为当前组件的vue实例对象，当vue实例初始化完成后currentInstance已经被赋值为null。所以当我们在非setup 期间调用inject方法会警告：inject() can only be used inside setup() or functional components.

至于currentApp其实是另外一个全局变量，在调用app.runWithContext方法时会给它赋值，这个下一节我们讲app.runWithContext的时候会详细讲。

使用`app.runWithContext()`打破`inject`只能在`setup` 期间调用的限制

app.runWithContext()的官方解释为“使用当前应用作为注入上下文执行回调函数”。这个解释乍一看很容易一脸懵逼，不着急我慢慢给你解释。

我们先来看看runWithContext方法接收的参数和返回的值。这个方法接收一个参数，参数是一个回调函数。这个回调函数会在app.runWithContext()执行时被立即执行，并且app.runWithContext()的返回值就是回调函数的返回值。

我们再来看一个使用runWithContext的例子，这行代码是拦截请求时才执行。作用是拿到app中注入的userType字段，注意不是在setup期间执行。

const userType = app.runWithContext(() => {
  // 拿到app中注入的userType字段
  return inject("userType");
});

按照我们前一节的分析，inject需要在setup中执行才能拿到当前的vue实例。但是之前还有一个currentApp变量我们没有解释，再来回顾一下上一节的inject源码。如果我们拿不到当前的vue实例，就会去看一下全局变量currentApp是否存在，如果存在那么就从currentApp中去拿provides对象。这个currentApp就是官方解释的“注入的上下文”，所以我们才可以在非setup期间执行inject，并且还可以拿到注入的值。

if (instance || currentApp) {
  // 拿到父组件或者currentApp中提供的provides对象
  const provides = instance
    ? instance.parent.provides
    : currentApp!._context.provides
  // 从provides对象中拿到相同key的值
  if (provides && key in provides) {
    return provides[key]
  }
}

我们再来看看runWithContext的源码，其实非常简单。

runWithContext(fn) {
  // 将调用runWithContext方法的对象赋值给全局对象currentApp
  currentApp = app
  try {
    // 立即执行传入的回调函数
    return fn()
  } finally {
    currentApp = null
  }
}

这里的app就是调用runWithContext方法的对象，你可以简单的理解为this。调用app.runWithContext()就会将app对象赋值给全局变量currentApp，然后会立即执行传入的回调fn。当执行到回调中的inject("userType")时，由于我们在上一行代码已经给全局变量currentApp赋值为app了，所以就可以从app中拿到对应key的provider值。