1
// Vue
2
const count = ref(0)
3
const doubled = computed(() => count.value * 2)
4
watchEffect(() => console.log(doubled.value))
5

6
// Solid
7
const [count, setCount] = createSignal(0)
8
const doubled = createMemo(() => count() * 2)
9
createEffect(() => console.log(doubled()))
10

11
// Angular
12
const count = signal(0)
13
const doubled = computed(() => count() * 2)
14
effect(() => console.log(doubled()))
15

16
// Preact Signals
17
const count = signal(0)
18
const doubled = computed(() => count.value * 2)
19
effect(() => console.log(doubled.value))

1
// 创建一个可写 Signal
2
const count = new Signal.State(0)
3

4
// 读取
5
count.get()  // 0
6

7
// 写入
8
count.set(1)
9

10
// 创建 Computed Signal（自动追踪依赖）
11
const doubled = new Signal.Computed(() => count.get() * 2)
12
doubled.get()  // 2
13

14
// 创建 Effect（副作用，非提案核心，由框架层实现）
15
// 提案只定义 State 和 Computed，Effect 交给用户态

1
const watcher = new Signal.subtle.Watcher(() => {
2
  // 当被监听的 Signal 变 dirty 时触发
3
  // 框架在这里调度更新（如 queueMicrotask、requestAnimationFrame 等）
4
  queueMicrotask(flushUpdates)
5
})
6

7
// 监听一组 Computed Signals
8
watcher.watch(computedA, computedB)
9

10
// 获取哪些 Signal 变 dirty 了
11
const dirtySignals = watcher.getPending()
12

13
// 手动触发脏检查
14
for (const signal of dirtySignals) {
15
  signal.get()  // 触发重新计算
16
}

1
// React：手动依赖，闭包陷阱
2
function Counter() {
3
  const [count, setCount] = useState(0)
4
  const doubled = useMemo(() => count * 2, [count])  // 手动 deps
5

6
  useEffect(() => {
7
    document.title = `Count: ${count}`
8
    return () => { /* cleanup */ }
9
  }, [count])  // 忘了加 count？bug。
10

11
  return <button onClick={() => setCount(c => c + 1)}>{doubled}</button>
12
}
13

14
// Signals：自动依赖，无闭包陷阱
15
const count = new Signal.State(0)
16
const doubled = new Signal.Computed(() => count.get() * 2)  // 自动追踪
17

18
// Effect（假设由框架提供）
19
effect(() => {
20
  document.title = `Count: ${count.get()}`
21
  // 自动追踪依赖，自动 cleanup
22
})

1
// 一个不依赖任何框架的状态管理库
2
export function createTodoStore() {
3
  const todos = new Signal.State([])
4
  const filter = new Signal.State('all')
5

6
  const filtered = new Signal.Computed(() => {
7
    const list = todos.get()
8
    switch (filter.get()) {
9
      case 'active': return list.filter(t => !t.done)
10
      case 'done': return list.filter(t => t.done)
11
      default: return list
12
    }
13
  })
14

15
  const count = new Signal.Computed(() => filtered.get().length)
16

17
  return {
18
    todos, filter, filtered, count,
19
    add(text) {
20
      todos.set([...todos.get(), { text, done: false }])
21
    },
22
    toggle(index) {
23
      const list = [...todos.get()]
24
      list[index] = { ...list[index], done: !list[index].done }
25
      todos.set(list)
26
    }
27
  }
28
}
29

30
// 在 Vue 中使用
31
// 在 Solid 中使用
32
// 在 Angular 中使用
33
// 同一份代码，零适配

1
class MyCounter extends HTMLElement {
2
  #count = new Signal.State(0)
3
  #display = new Signal.Computed(() => `Count: ${this.#count.get()}`)
4

5
  connectedCallback() {
6
    // 用框架提供的 effect，或自己实现
7
    this.#render()
8
  }
9

10
  #render() {
11
    // 利用 Watcher API 监听变化并更新 DOM
12
    const watcher = new Signal.subtle.Watcher(() => {
13
      this.shadowRoot.querySelector('span').textContent = this.#display.get()
14
    })
15
    watcher.watch(this.#display)
16
  }
17
}