xiaoniuge36/vue-composables

Vue Composables Skill

Vue 3 Composables 编写指导，帮助 AI 完成组合式函数设计、响应式状态管理等任务。

核心能力

| 能力 | 说明 | |------|------| | 🔧 Composables | 封装可复用逻辑 | | 📊 响应式 | ref/reactive | | ⚡ 生命周期 | onMounted/onUnmounted | | 👁️ 侦听器 | watch/watchEffect | | 🔗 依赖注入 | provide/inject |

---

常用 Composables

useToggle

import { ref } from 'vue';

export function useToggle(initialValue = false) {
  const value = ref(initialValue);
  
  const toggle = () => { value.value = !value.value; };
  const setTrue = () => { value.value = true; };
  const setFalse = () => { value.value = false; };
  
  return { value, toggle, setTrue, setFalse };
}

useLocalStorage

import { ref, watch } from 'vue';

export function useLocalStorage<T>(key: string, initialValue: T) {
  const storedValue = ref<T>(initialValue);
  
  // 初始化
  const item = localStorage.getItem(key);
  if (item) {
    storedValue.value = JSON.parse(item);
  }
  
  // 同步
  watch(storedValue, (val) => {
    localStorage.setItem(key, JSON.stringify(val));
  }, { deep: true });
  
  return storedValue;
}

useFetch

import { ref, watchEffect } from 'vue';

export function useFetch<T>(url: string | (() => string)) {
  const data = ref<T | null>(null);
  const loading = ref(true);
  const error = ref<Error | null>(null);

  const fetchData = async () => {
    loading.value = true;
    error.value = null;
    try {
      const urlValue = typeof url === 'function' ? url() : url;
      const res = await fetch(urlValue);
      data.value = await res.json();
    } catch (err) {
      error.value = err as Error;
    } finally {
      loading.value = false;
    }
  };

  watchEffect(() => {
    fetchData();
  });

  return { data, loading, error, refetch: fetchData };
}

useMouse

import { ref, onMounted, onUnmounted } from 'vue';

export function useMouse() {
  const x = ref(0);
  const y = ref(0);

  const update = (e: MouseEvent) => {
    x.value = e.pageX;
    y.value = e.pageY;
  };

  onMounted(() => window.addEventListener('mousemove', update));
  onUnmounted(() => window.removeEventListener('mousemove', update));

  return { x, y };
}

---

响应式技巧

ref vs reactive

// ref - 基础类型或需要替换整个对象
const count = ref(0);
const user = ref<User | null>(null);
user.value = { name: 'John' }; // 替换整个对象

// reactive - 对象/数组，不需要替换
const state = reactive({
  count: 0,
  user: null as User | null,
});
state.count++; // 直接修改属性

保持响应式

// ❌ 解构丢失响应式
const { count } = state; // count 不再响应

// ✅ 使用 toRefs
const { count } = toRefs(state);

// ✅ 使用 toRef
const count = toRef(state, 'count');

---

触发关键词

| 类型 | 关键词示例 | |------|-----------| | Composables | "composables"、"组合式函数"、"useXxx" | | 响应式 | "ref"、"reactive"、"响应式" | | 生命周期 | "onMounted"、"生命周期"、"挂载" |

---

最佳实践

✅ 推荐：
- 以 use 开头命名
- 返回 ref 或 reactive
- 清理副作用
- 使用 toRefs 解构

❌ 避免：
- 直接解构 reactive
- 忘记清理监听器
- 在 setup 外调用