defineExpose 是 Vue 3 Composition API 中的一个函数，它用于在 <script setup> 语法糖中显式声明组件需要暴露给模板或父组件的 props、响应式状态、方法等。虽然 <script setup> 语法使得在组件中编写逻辑更加简洁和方便，但默认情况下，模板和父组件无法直接访问在 <script setup> 中声明的局部变量、计算属性或方法，除非它们被明确导出（即暴露）。

在 Vue 3.2 之前的版本中，如果你需要在 <script setup> 中使用 defineExpose，你需要先通过 <script setup lang="ts"> 加上 Vue 的 TypeScript 插件支持来启用这个特性，因为它最初是作为 TypeScript 插件的一部分引入的。但从 Vue 3.2 开始，defineExpose 成为了 Vue 核心库的一部分，不再依赖于 TypeScript 插件，可以直接在任何 <script setup> 中使用。

使用示例

假设你有一个组件，它需要在内部维护一些状态，并希望将这些状态暴露给模板或父组件。你可以这样使用 defineExpose：

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

// 显式声明需要暴露给模板或父组件的属性和方法
defineExpose({
  count,
  increment
})
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

在这个例子中，尽管 count 和 increment 是在 <script setup> 中定义的，但由于它们被 defineExpose 显式暴露了，所以它们可以在模板中被访问和使用。

然而，值得注意的是，对于模板来说，直接访问 <script setup> 中的变量和方法通常是自动的，你通常不需要使用 defineExpose 来暴露给模板。defineExpose 的主要用途是当你需要明确地从 <script setup> 暴露内容给父组件（通过 ref 或 provide/inject API）时。

结论

defineExpose 是 Vue 3 Composition API 中的一个函数，用于在 <script setup> 语法中显式声明需要暴露给模板或父组件的属性和方法。尽管对于模板的访问通常是自动的，但当你需要向父组件暴露内容时，defineExpose 就变得非常有用。