Vue Academy · 课时

优秀组合式函数的特征

Q: 「优秀组合式函数的特征」这节课中我会学到什么？

命名约定（useName）、封装响应式状态，以及返回引用而不是原始值。 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

命名约定（useName）、封装响应式状态，以及返回引用而不是原始值。

第 1 / 4 课13 个步骤

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

什么是可组合函数

可组合函数是使用 Vue 组合式 API 来封装和复用有状态逻辑的函数。它是 Vue 3 对混入的解决方案，更整洁、更明确，也更适合类型检查。

use 前缀约定

按照惯例，组合式函数使用 use 前缀命名：useCounter、useFetch、useMouse。这样可以立即表明该函数包含响应式逻辑。

function useDarkMode() { /* ... */ }
function usePagination() { /* ... */ }

返回引用，而不是原始值

请返回引用（或响应式状态），这样消费者在解构时仍能保持响应式。返回 count.value 会交回一个永不更新的快照。

function useCounter() {
  const count = ref(0);
  return { count }; // return the ref itself
}

安全解构

由于您返回的是引用，消费者可以自由解构而不会丢失响应性。每个引用都保留着自己的响应式连接。

const { count } = useCounter();
// count stays reactive after destructuring

单一职责

优秀的组合式函数只做一件事。useFetch负责获取数据，useLocalStorage负责持久化。小而专注的组合式函数可以干净地组合成更大的功能。

组合组合式函数

组合式函数可以调用其他组合式函数，从而构建分层逻辑。例如，useUserProfile可能会在内部使用 useFetch。

function useUserProfile(id) {
  const { data } = useFetch("/users/" + id);
  return { user: data };
}

清理副作用

如果组合式函数添加了监听器、计时器或订阅，就必须在 onUnmounted 中移除它们，以防止内存泄漏。

import { onMounted, onUnmounted } from "vue";
onMounted(() => window.addEventListener("resize", onResize));
onUnmounted(() => window.removeEventListener("resize", onResize));

接受响应式参数

组合式函数可以接受引用或 getter 作为输入，并通过 watch 或 watchEffect对它们作出响应，因此更加灵活。

function useDouble(source) {
  return computed(() => unref(source) * 2);
}

避免命名冲突

当组合式函数返回许多值时，请使用清晰的名称。如果两个组合式函数都返回 data，请在解构时重命名，以避免冲突。

const { data: user } = useFetch("/user");
const { data: posts } = useFetch("/posts");

遵循框架惯用风格

请在 setup 的顶层（或另一个组合式函数中）同步调用组合式函数，而不要在条件语句或异步回调中调用，这样生命周期钩子才能正确注册。

// good: top-level
const { count } = useCounter();
// avoid: inside if-blocks or after await

文档与返回结构

请返回结构可预测的对象，让消费者清楚知道会得到什么。一致的结构（状态加方法）使组合式函数易于学习和使用。

return { count, increment, decrement, reset };

快速检查

为什么组合式函数应该返回引用，而不是原始值？

在交互式课程中回答

回顾

您已经了解优秀组合式函数的特征：使用 use 前缀、返回引用以实现安全解构、遵循单一职责、在 onUnmounted 中清理副作用，以及避免返回对象中的命名冲突。

免费开始

用 AI 导师学习 HTML — 免费

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

课程: 42
课程: 156

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

常见问题解答

「优秀组合式函数的特征」课时是免费的吗？

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

「优秀组合式函数的特征」这节课中我会学到什么？

命名约定（useName）、封装响应式状态，以及返回引用而不是原始值。你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

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

「优秀组合式函数的特征」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 Vue Academy