模板引用与响应式工具

<script setup lang="ts">
import { ref, onMounted } from 'vue';
 
const inputRef = ref<HTMLInputElement | null>(null);
 
onMounted(() => {
  inputRef.value?.focus(); // 挂载后自动聚焦
});
</script>
 
<template>
  <input ref="inputRef" />
</template>

const inputRef = useTemplateRef<HTMLInputElement>('inputRef');

import { shallowRef, shallowReactive, triggerRef } from 'vue';
 
// shallowRef：只有 .value 整体替换才触发更新
const bigList = shallowRef([/* 一万个元素 */]);
bigList.value.push(1);        // ❌ 不触发（改的是内部数组，没换 .value）
bigList.value = [...bigList.value, 1]; // ✅ 换引用才触发
 
// 想就地改又想通知，用 triggerRef 手动触发
bigList.value.push(2);
triggerRef(bigList);          // ✅ 手动触发一次
 
// shallowReactive：只有根属性替换才触发
const state = shallowReactive({ nested: { count: 0 } });
state.nested.count++;         // ❌ 不触发（nested 不是深层代理）
state.nested = { count: 1 };  // ✅ 触发

import { reactive, markRaw } from 'vue';
import ThirdPartyChart from 'some-lib';
 
const state = reactive({
  chart: markRaw(new ThirdPartyChart()), // 不代理，原样存
});

// ---- 极简响应系统（与第 7 章同源） ----
type Dep = Set<Effect>;
const targetMap = new WeakMap<object, Map<PropertyKey, Dep>>();
let activeEffect: Effect | null = null;
interface Effect { deps: Dep[]; run: () => void; }
function effect(fn: () => void): Effect {
  const e: Effect = {
    deps: [],
    run: () => {
      for (const d of e.deps) d.delete(e);
      e.deps.length = 0;
      activeEffect = e;
      try { fn(); } finally { activeEffect = null; }
    },
  };
  e.run();
  return e;
}
function track(t: object, k: PropertyKey): void {
  if (!activeEffect) return;
  let m = targetMap.get(t);
  if (!m) { m = new Map(); targetMap.set(t, m); }
  let dep = m.get(k);
  if (!dep) { dep = new Set(); m.set(k, dep); }
  dep.add(activeEffect);
  activeEffect.deps.push(dep);
}
function trigger(t: object, k: PropertyKey): void {
  const m = targetMap.get(t);
  if (!m) return;
  const dep = m.get(k);
  if (!dep) return;
  for (const e of [...dep]) if (e !== activeEffect) e.run();
}
 
// ---- 可手动推进的 fake timer（保证输出确定） ----
let now = 0, tid = 0;
const timers: { id: number; due: number; cb: () => void }[] = [];
function fakeSetTimeout(cb: () => void, delay: number): number {
  const id = ++tid; timers.push({ id, due: now + delay, cb }); return id;
}
function fakeClear(id: number): void {
  const i = timers.findIndex((t) => t.id === id);
  if (i >= 0) timers.splice(i, 1);
}
function flush(ms: number): void {
  const end = now + ms;
  while (timers.length) {
    timers.sort((a, b) => a.due - b.due);
    const job = timers[0];
    if (job.due > end) break;
    timers.shift(); now = job.due; job.cb();
  }
  now = end;
}
 
// ---- customRef：把 track / trigger 交给使用者 ----
interface Ref<T> { get value(): T; set value(v: T); }
function customRef<T>(factory: (track: () => void, trigger: () => void) => { get: () => T; set: (v: T) => void }): Ref<T> {
  const ref: { value: T } = {} as any;
  const impl = factory(
    () => track(ref, 'value'),
    () => trigger(ref, 'value'),
  );
  Object.defineProperty(ref, 'value', {
    get() { return impl.get(); },
    set(v: T) { impl.set(v); },
    configurable: true,
  });
  return ref as Ref<T>;
}
 
// ---- 防抖 ref：300ms 内的连续写入只生效最后一次 ----
function debouncedRef(initial: string, delay = 300): Ref<string> {
  let _v = initial;
  let timer: number | null = null;
  return customRef<string>((track, trigger) => ({
    get() { track(); return _v; },
    set(nv: string) {
      if (timer !== null) fakeClear(timer);          // 取消上一次待触发的定时器
      timer = fakeSetTimeout(() => { _v = nv; timer = null; trigger(); }, delay);
    },
  }));
}
 
const text = debouncedRef('', 300);
let runs = 0;
effect(() => { runs++; console.log("[effect] text=" + text.value); });
console.log("--- 连续输入 a b c（每 100ms），debounce 300ms ---");
text.value = 'a'; flush(100);
text.value = 'b'; flush(100);
text.value = 'c'; flush(400);
console.log("runs = " + runs);

import { reactive, toRef, toRefs, isRef, unref, readonly } from 'vue';
 
const state = reactive({ x: 1, y: 2 });
 
// toRef：给某个属性单独造一个「会随源更新」的 ref（属性可能原本不存在也好用）
const xRef = toRef(state, 'x');
xRef.value++;          // state.x 变成 2
state.x = 10;          // xRef.value 变成 10（双向）
 
// toRefs：解构 reactive 而不丢响应（见第 8 章 Playground）
const { x, y } = toRefs(state);
 
// isRef / unref：运行时判断与取值
isRef(x);              // true
unref(x);              // 等价于 isRef(x) ? x.value : x，拿到 10
 
// readonly：包装成只读，改它会报警（用于把 store 状态对外暴露时防误改）
const locked = readonly(state);
locked.x = 5;          // ⚠ 开发环境下警告，不生效