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

注意：新版本中没有这个bug了，只要保证provide 需在 <script setup> 中同步执行就行。在线调试

---

项目场景：

以服务的方式来调用element-plus loading，导致vue组件依赖注入失效：祖先组件部分属性无法 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 内置组件组合使用”

provide 需在setup中同步执行

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

---

解决方案：

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

getDataList() ↓

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