在 script setup 中导入并使用组合式函数
导入组合式函数、使用第三方 VueUse 组合式函数，以及整理导入内容。
在 script setup 中导入并使用组合式函数 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。
组合式函数与 script setup
组合式函数是将响应式逻辑封装起来以便复用的函数。在 <script setup> 中使用它们非常简单，只需在顶层导入并调用即可。
在顶层导入
始终在 <script setup> 的顶层调用组合式函数——不要在条件、循环或嵌套函数中调用。这样可以确保 Vue 正确注册其响应式逻辑和生命周期钩子。
<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>顶层调用为何重要
组合式函数通常会注册 onMounted 等生命周期钩子，或设置侦听器。这些操作必须在组件设置阶段运行，只有在顶层同步调用组合式函数时才能实现。
只解构所需内容
组合式函数会返回一个包含响应式值和函数的对象。请只解构组件实际使用的内容；如果两次调用同一个组合式函数，请重命名它们以避免冲突。
<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>认识 VueUse
VueUse 是一个广受欢迎的现成组合式函数库。与其自己编写常见逻辑，不如导入经过测试的组合式函数。安装一次后，导入所需内容即可。
<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>实际使用 useLocalStorage
useLocalStorage 会返回一个与 localStorage 同步的 ref。修改该 ref 后，浏览器存储会随之更新；重新加载页面后，值仍会保留。
<template>
<input v-model="name" />
<p>Saved: {{ name }}</p>
</template>使用 useMouse 获取响应式坐标
useMouse 会将指针位置作为响应式 ref 进行追踪。它会为您添加和移除事件监听器，因此您无需手动管理清理工作。
<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>
<template>
<p>{{ x }}, {{ y }}</p>
</template>组合式函数可以组合
一个组合式函数可以调用其他组合式函数。这种分层组合是组合式 API 的核心——先构建小型功能块，再将它们组合成更大的功能。
import { useMouse } from '@vueuse/core'
export function useMouseDistance() {
const { x, y } = useMouse()
const distance = computed(() => Math.hypot(x.value, y.value))
return { distance }
}顶层 await
<script setup> 支持直接在顶层使用 await。组件会变成异步 setup，框架可以暂停渲染，直到 promise 完成。
<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>使用异步 setup 的 Suspense
使用顶层 await 的组件必须由父组件放置在 <Suspense> 边界内。异步 setup 完成前，Suspense 会显示后备内容。
<template>
<Suspense>
<AsyncUser />
<template #fallback>Loading...</template>
</Suspense>
</template>最佳实践
- 使用
use前缀为组合式函数命名。 - 仅在顶层调用它们。
- 返回 ref（或返回使用
toRefs包装的reactive）。 - 在编写自己的组合式函数之前，优先考虑 VueUse 是否已能满足常见需求。
快速检查
请确认您对组合式函数的理解。
回顾
您已经学会使用组合式函数：
- 在
<script setup>的顶层导入并调用它们。 - 解构并重命名所需内容。
- VueUse 提供了
useLocalStorage和useMouse等现成的组合式函数。 - 顶层
await会使 setup 变为异步，并与<Suspense>配合使用。
常见问题解答
「在 script setup 中导入并使用组合式函数」课时是免费的吗？
是的 — 「在 script setup 中导入并使用组合式函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。
「在 script setup 中导入并使用组合式函数」这节课中我会学到什么？
导入组合式函数、使用第三方 VueUse 组合式函数，以及整理导入内容。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Vue Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「在 script setup 中导入并使用组合式函数」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Vue Academy 课中编写并运行代码吗？
能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- script setup 入门
- defineProps 与 defineEmits
- defineExpose 与 useAttrs
- 在 script setup 中导入并使用组合式函数