Vue Academy · 课时

组合式函数工厂与参数化组合式函数

Q: 「组合式函数工厂与参数化组合式函数」这节课中我会学到什么？

创建组合式函数工厂、为每个实例设定状态作用域，以及避免共享单例状态 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

创建组合式函数工厂、为每个实例设定状态作用域，以及避免共享单例状态

第 2 / 4 课13 个步骤

组合式函数工厂与参数化组合式函数 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

接收参数的组合式函数

普通组合式函数会返回固定的行为。带参数的组合式函数会接受参数来定制其行为——例如基础 URL、选项和默认值——让一个函数可以处理许多情况。

简单的带参数组合式函数

将配置作为参数传入。这里的 URL 由调用方提供，因此一个 useFetch 就能适用于任何端点。

import { ref } from "vue"

export function useFetch(url) {
  const data = ref(null)
  fetch(url).then(r => r.json()).then(d => data.value = d)
  return { data }
}

接受选项对象

如果需要许多可调参数，请使用带有默认值的选项对象。这样既能让调用位置易于阅读，也能让组合式函数保持灵活。

export function useFetch(url, options = {}) {
  const { immediate = true, method = "GET" } = options
  const data = ref(null)
  function run() { /* fetch with method */ }
  if (immediate) run()
  return { data, run }
}

什么是组合式函数工厂？

工厂更进一步：它是一个返回组合式函数的函数，并预先配置了共享设置。您只需配置一次，就能获得一个适用于各个组件的定制组合式函数。

构建工厂

外层函数会捕获共享配置（例如 baseURL）；返回的内层函数就是组合式函数，配置通过闭包预先写入其中。

export function createApi(baseURL) {
  return function useApi(path) {
    const data = ref(null)
    fetch(baseURL + path).then(r => r.json()).then(d => data.value = d)
    return { data }
  }
}

使用工厂

调用一次工厂（通常在共享模块中）来生成已配置的组合式函数，然后在各处导入并使用它。

// api.js
export const useApi = createApi("https://api.example.com")

// component
import { useApi } from "./api"
const { data } = useApi("/users")

每个实例的独立状态

每次调用组合式函数时，它所创建的引用都是全新的，并且只属于这次调用。两个组件调用 useFetch 时，会获得相互独立的 data 引用，不会意外共享数据。

const a = useFetch("/posts")   // its own data ref
const b = useFetch("/comments") // a separate data ref

模块级共享单例

有时您 WANT 一个共享实例。请在模块级别（函数外部）声明状态，让组合式函数通过闭包捕获它——所有调用方都会共享相同的引用。

import { ref } from "vue"
const user = ref(null) // module-level, shared

export function useAuth() {
  function login(u) { user.value = u }
  return { user, login }
}

实例级状态与单例

函数内部的状态 → 每次调用都会创建新的状态（每个组件一份）——适用于表单、数据获取器。
模块级别的状态 → 共享单例——适用于当前用户、主题和应用级标志。

请根据数据是组件本地数据还是全局数据来进行选择。

组合使用工厂与单例

工厂也可以生成单例：在调用工厂时创建共享状态（只运行一次），并让返回的组合式函数通过闭包捕获它。

export function createStore(initial) {
  const state = ref(initial) // created once per factory call
  return function useStore() {
    return { state }
  }
}
export const useCounter = createStore(0)

何时使用工厂

当多个组合式函数共享配置（基础 URL、请求头、客户端实例），或者您正在构建一个小型库并希望使用者只配置一次时，请使用工厂。除此之外，带参数的组合式函数更简单。

快速检查

检查您对组合式函数工厂和作用域的理解。

在交互式课程中回答

回顾

您学会了组合式函数工厂和作用域：

带参数的组合式函数接受参数或选项，以定制其行为。
工厂是一个返回预先配置组合式函数的函数（配置通过闭包捕获）。
函数内部的状态属于每个实例；位于模块级别的状态是共享单例。
组件本地数据应使用实例级状态，应用级状态（当前用户、主题）应使用单例。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 42
课程: 156

免费开始学习查看完整课程

常见问题解答

「组合式函数工厂与参数化组合式函数」课时是免费的吗？

是的 — 「组合式函数工厂与参数化组合式函数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「组合式函数工厂与参数化组合式函数」这节课中我会学到什么？

创建组合式函数工厂、为每个实例设定状态作用域，以及避免共享单例状态你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「组合式函数工厂与参数化组合式函数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy