create-adaptable-composable
Создание адаптируемого Vue composable
Создание Vue composables с гибкими типами входных данных — сложная задача. Этот скилл предоставляет шаблон для создания библиотечных composables, которые принимают как реактивные, так и не реактивные входные данные, используя типы MaybeRef и MaybeRefOrGetter.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "create-adaptable-composable". Создайте composable useDocumentTitle, который принимает MaybeRefOrGetter для заголовка
النتيجة المتوقعة:
- 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 })
- }
استخدام "create-adaptable-composable". Создайте composable useCounter с MaybeRef для начального счёта
النتيجة المتوقعة:
- 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 }
- }
التدقيق الأمني
آمنStatic analyzer flagged TypeScript template literals as shell backticks and random text patterns as cryptographic algorithms. All findings are false positives. The skill contains only Vue.js documentation with TypeScript code examples for creating composables. No shell commands, cryptographic code, or security risks exist.
مشكلات عالية المخاطر (2)
مشكلات متوسطة المخاطر (1)
درجة الجودة
ماذا يمكنك بناءه
Создание менеджера заголовков только для чтения
Создайте composable, который устанавливает заголовок документа и принимает заголовок как MaybeRefOrGetter, позволяя использовать простые строки, refs или функции-геттеры.
Создание composable счётчика с записью
Создайте composable счётчика с MaybeRef входным значением для начального счёта, обеспечив двустороннее связывание с реактивными и не реактивными значениями.
Проектирование гибкого обработчика полей формы
Спроектируйте composables, которые принимают DOM-элементы или вычисляемые цели как MaybeRefOrGetter для гибкой обработки ввода в различных контекстах.
جرّب هذه الموجهات
Создайте адаптируемый composable под названием useUserPreferences, который принимает MaybeRefOrGetter для настройки темы. Комposable должен следить за значением и применять тему к телу документа.
Создайте composable useLocalStorage, который принимает MaybeRef для начального значения и ключа. Комposable должен синхронизировать значение ref с localStorage и возвращать writable ref.
Создайте composable useDebouncedValue, где входными данными является MaybeRefOrGetter. Используйте watch() с toRef() для реактивных источников и возвращайте вычисляемое значение, которое обновляется с задержкой.
Спроектируйте composable useFormValidator, который принимает несколько MaybeRef входных данных для значений полей формы и MaybeRefOrGetter для правил валидации. Нормализуйте все входные данные и верните состояние валидации.
أفضل الممارسات
- Используйте MaybeRefOrGetter для входных данных только для чтения, удобных для вычислений, чтобы принимать refs, getters или простые значения
- Используйте toRef() внутри источников watch/watchEffect для корректного разрешения реактивных зависимостей
- Используйте toValue() для нормализации не реактивных значений для извлечения фактических значений
- Избегайте MaybeRefOrGetter для параметров функций, которые могут быть callback-функциями, чтобы предотвратить случайный вызов
تجنب
- Не передавайте пользовательские callbacks напрямую в MaybeRefOrGetter без type guards
- Не нормализуйте входные данные вне реактивных контекстов, таких как watch или watchEffect
- Не смешивайте toRef() и toValue() непоследовательно внутри одного composable
- Не предполагайте, что все параметры должны быть MaybeRef — используйте обычные типы, когда реактивность не нужна