组合式函数

// useCounter.ts
import { ref } from 'vue';
 
export function useCounter(initial = 0) {
  const count = ref(initial);
  const inc = () => count.value++;
  const dec = () => count.value--;
  return { count, inc, dec };
}

<script setup lang="ts">
import { useCounter } from './useCounter';
 
const { count, inc, dec } = useCounter(0);
</script>
 
<template>
  <button @click="dec">-</button>
  <span>{{ count }}</span>
  <button @click="inc">+</button>
</template>

// ✅ 返回 ref，调用方解构后仍响应
export function useMouse() {
  const x = ref(0);
  const y = ref(0);
  return { x, y };
}
const { x, y } = useMouse(); // x、y 都是 ref，保持响应
 
// ❌ 返回 reactive 对象，调用方一解构就丢响应
export function useMouseBad() {
  const pos = reactive({ x: 0, y: 0 });
  return pos;
}
const { x, y } = useMouseBad(); // x、y 变成普通数字，不再响应

import { ref, toValue, type MaybeRefOrGetter } from 'vue';
 
export function useFetch(url: MaybeRefOrGetter<string>) {
  const data = ref(null);
  watchEffect(() => {
    fetch(toValue(url)).then((r) => r.json()).then((d) => (data.value = d));
  });
  return { data };
}
 
// 三种调用都行
useFetch('/api/a');
useFetch(urlRef);
useFetch(() => `/user/${id.value}`);

export function useWindowSize() {
  const width = ref(window.innerWidth);
  const onResize = () => (width.value = window.innerWidth);
  onMounted(() => window.addEventListener('resize', onResize));
  onUnmounted(() => window.removeEventListener('resize', onResize));
  return { width };
}

const scope = effectScope();
scope.run(() => {
  // 这里创建的 effect / 计算属性 / 监听，都被 scope 收集
  const state = reactive({ n: 0 });
  watch(state, () => console.log('changed'));
});
// 想销毁时一次性停掉里面的所有东西
scope.stop();

type Dep = Set<ReactiveEffect>;
const targetMap = new WeakMap<object, Map<PropertyKey, Dep>>();
let activeEffect: ReactiveEffect | null = null;
 
interface ReactiveEffect {
  deps: Dep[];
  active: boolean;
  run: () => void;
  stop: () => void;
}
 
function cleanup(e: ReactiveEffect): void {
  for (const d of e.deps) d.delete(e);
  e.deps.length = 0;
}
 
function effect(fn: () => void): ReactiveEffect {
  const e: ReactiveEffect = {
    deps: [],
    active: true,
    run: () => {
      if (!e.active) { fn(); return; }
      cleanup(e);
      activeEffect = e;
      try { fn(); } finally { activeEffect = null; }
    },
    stop: () => { if (e.active) { cleanup(e); e.active = false; } },
  };
  e.run();
  if (activeScope) activeScope.effects.push(e);
  return e;
}
 
function track(target: object, key: PropertyKey): void {
  if (!activeEffect) return;
  let m = targetMap.get(target);
  if (!m) { m = new Map(); targetMap.set(target, m); }
  let dep = m.get(key);
  if (!dep) { dep = new Set(); m.set(key, dep); }
  dep.add(activeEffect);
  activeEffect.deps.push(dep);
}
 
function trigger(target: object, key: PropertyKey): void {
  const m = targetMap.get(target);
  if (!m) return;
  const dep = m.get(key);
  if (!dep) return;
  for (const e of new Set(dep)) if (e !== activeEffect) e.run();
}
 
function isObject(v: unknown): v is object { return typeof v === 'object' && v !== null; }
const reactiveMap = new WeakMap<object, object>();
const RAW = Symbol('raw');
function reactive<T extends object>(target: T): T {
  if (!isObject(target)) return target;
  if ((target as Record<symbol, unknown>)[RAW]) return target;
  const existing = reactiveMap.get(target);
  if (existing) return existing as T;
  const proxy = new Proxy(target, {
    get(obj: object, key: string | symbol, receiver: any) {
      if (key === RAW) return target;
      const res = Reflect.get(obj, key, receiver);
      track(obj, key);
      if (isObject(res)) return reactive(res as object) as object;
      return res;
    },
    set(obj: object, key: string | symbol, value: any, receiver: any) {
      const oldVal = (obj as Record<string | symbol, unknown>)[key];
      const hadKey = Object.prototype.hasOwnProperty.call(obj, key);
      const result = Reflect.set(obj, key, value, receiver);
      if (!hadKey || !Object.is(oldVal, value)) trigger(obj, key);
      return result;
    },
  });
  reactiveMap.set(target, proxy);
  return proxy as T;
}
 
interface EffectScope {
  effects: ReactiveEffect[];
  scopes: EffectScope[];
  cleanups: (() => void)[];
  parent: EffectScope | null;
  active: boolean;
  run: <T>(fn: () => T) => T;
  stop: (fromParent?: boolean) => void;
}
 
let activeScope: EffectScope | null = null;
 
function effectScope(detached = false): EffectScope {
  const scope: EffectScope = {
    effects: [],
    scopes: [],
    cleanups: [],
    parent: null,
    active: true,
    run<T>(fn: () => T): T {
      const prev = activeScope;
      activeScope = this;
      try { return fn(); } finally { activeScope = prev; }
    },
    stop() {
      if (this.active) {
        this.active = false;
        for (const e of this.effects) e.stop();
        for (const s of this.scopes) s.stop(true);
        for (const c of this.cleanups) c();
      }
    },
  };
  if (!detached && activeScope) {
    activeScope.scopes.push(scope);
    scope.parent = activeScope;
  }
  return scope;
}
 
function toRefs<T extends object>(obj: T): Record<string, { value: any }> {
  const result: Record<string, { value: any }> = {};
  for (const key in obj) {
    result[key] = {
      get value() { return (obj as Record<string, any>)[key]; },
      set value(v: any) { (obj as Record<string, any>)[key] = v; },
    };
  }
  return result;
}
 
// ===== 测试 =====
const s = reactive({ count: 0, name: 'Ada' });
 
const scope = effectScope();
let runs = 0;
scope.run(() => {
  effect(() => { runs++; console.log("[scope] count=" + s.count); });
  effect(() => { runs++; console.log("[scope] name=" + s.name); });
  const child = effectScope();
  child.run(() => {
    effect(() => { runs++; console.log("[child] count*2=" + (s.count * 2)); });
  });
});
 
console.log("--- 改 count：触发 2 个 scope effect + 1 个 child effect ---");
s.count = 1;
console.log("runs 已 = " + runs);
 
scope.stop();
console.log("--- scope.stop() 后 ---");
s.count = 2;
s.name = 'Grace';
console.log("stop 后 runs 仍 = " + runs);
 
// toRefs 演示
const state = reactive({ x: 1, y: 2 });
const { x } = state;
let directRuns = 0;
effect(() => { directRuns++; console.log("[direct] x=" + x); });
state.x = 99;
console.log("直接解构后 directRuns = " + directRuns + " (x 仍是 " + x + ")");
 
const refs = toRefs(state);
let refRuns = 0;
effect(() => { refRuns++; console.log("[toRefs] x=" + refs.x.value); });
state.x = 100;
console.log("toRefs 后 refRuns = " + refRuns);