vue3的<script setup></script>中provide/inject怎么用？

在 Vue 3 中，`<script setup>` 是一个新特性，它可以更简单地编写组件选项和组合式 API，并且可以提高性能。在 `<script setup>` 中使用 `provide/inject` 可以像在传统的 `setup()` 中使用一样，提供和注入依赖项。

下面是一个示例：

<template>
  <div>{{ count }}</div>
</template>

<script setup>
import { provide, inject, ref } from 'vue'

const COUNT_KEY = Symbol()

// 提供 count
const provideCount = () => {
  const count = ref(0)
  provide(COUNT_KEY, count)
}

// 注入 count
const useCount = () => {
  const count = inject(COUNT_KEY)
  return count
}

provideCount()
</script>

在上面的例子中，我们首先定义了一个 `COUNT_KEY`，它是一个唯一的 Symbol，用于提供和注入依赖项。然后我们定义了 `provideCount()` 函数，它提供了一个 `count` 响应式对象，并将其提供给其他组件。最后，我们使用 `useCount()` 函数在组件中注入 `count`。

注意，我们应该在 `<script setup>` 中立即调用 `provideCount()` 函数以提供 `count`，否则在注入 `count` 时会出现问题。

最后，我们可以在组件中使用 `useCount()` 函数来获取 `count`，并将其渲染到模板中。