[BUG记录] vue3 setup provide/inject：无法正常进行依赖注入

项目场景：

以服务的方式来调用element-plus loading，导致依赖注入失效：祖先组件部分属性无法 provide，后代组件无法 inject 祖先组件 provide 的值

---

问题描述

调试信息：
祖先组件：

[Vue warn]: provide() can only be used inside setup(). 

后代组件：

[Vue warn]: injection "manager" not found.

---

原因分析：

导致此bug的改动为：增加了一个接口请求的加载提示

示例：

<script setup>
import {
    
     ref, reactive, toRefs, provide } from 'vue'
import {
    
     apiFunc } from '@/api/demo'
import {
    
     ElLoading } from 'element-plus'
import Comp from './comp.vue'

const props = defineProps({
    
    
  pid: {
    
     type: [Number, String], default: '' },
  source: {
    
     type: String, default: '' }
})

const {
    
     pid, source } = toRefs(props)

provide('source', source)
provide('pid', pid)

async function getDataList() {
    
    
  const pageLoading = ElLoading.service({
    
     target: '.container', text: 'Loading' })
  let res = await apiFunc()
  pageLoading.close()
}
getDataList()
provide('testFunc', getDataList)

const testData = reactive({
    
     name: 'Anne' })
provide('name', computed(() => testData.name))

</script>
<template>
  <Comp />
</template>

调试发现 source, pid 正常插入，但后两个失效

“async setup() 必须与 Suspense 内置组件组合使用”

分析发现，是 ElLoading 的同步调用导致后续 provide 的执行出了问题（[Vue warn]: provide() can only be used inside setup(). ）

---

解决方案：

分析发现是 element-plus 的bug。上例中，可以选择将后续的 provide 上移。但不是解决问题的根本办法，将 getDataList 改为异步执行可以避免出现这个bug

getDataList() ↓

import {
    
     onMounted } from 'vue'
onMounted(() => {
    
    
  getDataList()
})