mcpField
C
create-adaptable-composable

create-adaptable-composable

github.com/vuejs-ai开发3.2k14.1k 次安装5 天前更新
代码仓库

关于 create-adaptable-composable

面向 Vue.js 开发者的技能，介绍如何设计可接受响应式与普通输入的 composable。内容涵盖类型选择及使用 Vue 响应式 API 规范化输入，并说明可写值和函数参数的处理方式。

主要功能

  1. 01设计可复用 composable API
  2. 02选择 MaybeRef 与 MaybeRefOrGetter
  3. 03使用 toRef 或 toValue 规范化输入
  4. 04处理可写与只读输入

适用场景

  1. 01构建兼容 ref 和普通值的 composable
  2. 02支持计算或派生输入
  3. 03创建双向可写 composable
  4. 04避免意外调用函数参数

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vuejs-ai/skills --skill create-adaptable-composable

安装后在 Claude Code 中输入/create-adaptable-composable确认已加载。

详细介绍

创建适配性组合式函数

适配性组合式函数是可重复使用的函数，可以接受响应式和非响应式输入。这样，开发者就能在各种场景中使用组合式函数，而不必担心输入是否具有响应性。

在 Vue.js 中设计适配性组合式函数的步骤：

  1. 确认组合式函数的用途、API 设计以及预期的输入和输出。
  2. 确定哪些输入参数应当具有响应性（MaybeRef / MaybeRefOrGetter）。
  3. 使用 toValue() 或 toRef() 在响应式副作用中规范化输入。
  4. 使用 Vue 的响应式 API 实现组合式函数的核心逻辑。

核心类型概念

类型工具
/**
 * value or writable ref (value/ref/shallowRef/writable computed)
 */
export type MaybeRef<T = any> = T | Ref<T> | ShallowRef<T> | WritableComputedRef<T>;

/**
 * MaybeRef<T> + ComputedRef<T> + () => T
 */
export type MaybeRefOrGetter<T = any> = MaybeRef<T> | ComputedRef<T> | (() => T);
策略与规则
  • 只读、适用于计算属性的输入：使用 MaybeRefOrGetter
  • 需要可写 / 双向输入：使用 MaybeRef
  • 参数可能是函数值（回调 / 谓词 / 比较器）：不要使用 MaybeRefOrGetter，否则可能会意外地将其作为 getter 调用。
  • DOM / 元素目标：如果需要计算或派生目标，请使用 MaybeRefOrGetter。

使用 MaybeRefOrGetter 或 MaybeRef 时：

  • 使用 toRef() 解析响应式值（例如 watcher 源）
  • 使用 toValue() 解析非响应式值
示例

适配性 useDocumentTitle 组合式函数：只读标题参数

import { watch, toRef } from 'vue'
import type { MaybeRefOrGetter } from 'vue'

export function useDocumentTitle(title: MaybeRefOrGetter<string>) {
  watch(toRef(title), (t) => {
    document.title = t
  }, { immediate: true })
}

适配性 useCounter 组合式函数：双向可写计数参数

import { watch, toRef } from 'vue'
import type { MaybeRef } from 'vue'

function useCounter(count: MaybeRef<number>) {
  const countRef = toRef(count)
  function add() {
    countRef.value++
  }
  return { add }
}

评论

支持 Markdown