mcpField
C
create-adaptable-composable

create-adaptable-composable

github.com/liangmiqwq开发139 次安装2 天前更新
代码仓库

关于 create-adaptable-composable

面向 Vue.js 的技能，介绍如何设计可接收响应式和普通输入的 composable，并说明可复用 API 的类型选择与值规范化方式。

主要功能

  1. 01选择响应式输入类型
  2. 02使用 toRef() 和 toValue() 规范化值
  3. 03处理可写与只读输入
  4. 04支持派生 DOM 目标

适用场景

  1. 01设计可复用的 Vue.js composable
  2. 02接收响应式或普通参数
  3. 03构建含可写输入的 composable

安装

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

$npx skills add https://github.com/liangmiqwq/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