2026 前端状态管理全景：从 Pinia 到 Signals 的演进之路

1
2015-2018: 集中式 Store
2
├── Vuex (Vue 生态)
3
├── Redux (通用，但主要配合 React)
4
└── 特点: 单一 Store、严格的 mutation、boilerplate 多
5

6
2019-2022: 轻量化浪潮
7
├── Pinia (Vue 3 官方推荐)
8
├── Zustand (极简 API)
9
├── Jotai (原子化)
10
└── 特点: 更少的 boilerplate、更灵活的组织方式
11

12
2023-2026: 细粒度响应式
13
├── Signals (TC39 提案 / 各框架实现)
14
├── Vue Vapor Mode (编译时优化)
15
├── Solid.js Signals (先驱)
16
└── 特点: 编译器优化、无虚拟 DOM、极致性能

1
// Vue 3 响应式系统的核心：Proxy
2
// 当你写 ref([]) 时，Vue 做了什么？
3

4
// 简化版 ref 实现
5
function ref(rawValue) {
6
  return {
7
    get value() {
8
      // 读取时收集依赖（track）
9
      track(this, 'value');
10
      return rawValue;
11
    },
12
    set value(newValue) {
13
      rawValue = newValue;
14
      // 写入时触发更新（trigger）
15
      trigger(this, 'value');
16
    },
17
  };
18
}
19

20
// 简化版 reactive 实现（Pinia 内部用 reactive 包装 state）
21
function reactive(target) {
22
  return new Proxy(target, {
23
    get(target, key, receiver) {
24
      const result = Reflect.get(target, key, receiver);
25
      track(target, key); // 收集依赖
26
      // 如果结果是对象，递归代理（懒代理）
27
      if (typeof result === 'object' && result !== null) {
28
        return reactive(result);
29
      }
30
      return result;
31
    },
32
    set(target, key, value, receiver) {
33
      const oldValue = target[key];
34
      const result = Reflect.set(target, key, value, receiver);
35
      if (oldValue !== value) {
36
        trigger(target, key); // 触发更新
37
      }
38
      return result;
39
    },
40
  });
41
}

1
// Pinia 内部（简化）
2
function defineStore(id, setup) {
3
  return function useStore() {
4
    const pinia = inject(piniaSymbol);
5

6
    if (!pinia._stores.has(id)) {
7
      // 在 effectScope 中执行 setup，确保所有响应式效果可统一清理
8
      const scope = effectScope(true);
9
      const store = scope.run(() => {
10
        const result = setup();
11
        // 将所有 ref 和 reactive 包装到统一的 reactive 对象中
12
        return result;
13
      });
14

15
      pinia._stores.set(id, store);
16
    }
17

18
    return pinia._stores.get(id);
19
  };
20
}

1
// Zustand 核心实现（简化版）
2
type SetState<T> = (partial: Partial<T> | ((state: T) => Partial<T>)) => void;
3
type GetState<T> = () => T;
4
type Listener<T> = (state: T, prevState: T) => void;
5

6
function createStore<T>(createState: (set: SetState<T>, get: GetState<T>) => T) {
7
  let state: T;
8
  const listeners = new Set<Listener<T>>();
9

10
  const getState: GetState<T> = () => state;
11

12
  const setState: SetState<T> = (partial) => {
13
    const prevState = state;
14
    const nextPartial = typeof partial === 'function' ? partial(state) : partial;
15
    // 浅合并（不是深合并！）
16
    const nextState = Object.assign({}, state, nextPartial);
17

18
    if (!Object.is(nextState, state)) {
19
      state = nextState;
20
      // 通知所有订阅者
21
      listeners.forEach((listener) => listener(state, prevState));
22
    }
23
  };
24

25
  const subscribe = (listener: Listener<T>) => {
26
    listeners.add(listener);
27
    return () => listeners.delete(listener);
28
  };
29

30
  // 初始化状态
31
  state = createState(setState, getState);
32

33
  return { getState, setState, subscribe };
34
}

1
import { create } from 'zustand';
2
import { devtools, persist, subscribeWithSelector } from 'zustand/middleware';
3
import { immer } from 'zustand/middleware/immer';
4

5
interface TodoState {
6
  todos: Array<{ id: number; text: string; done: boolean }>;
7
  addTodo: (text: string) => void;
8
  toggleTodo: (id: number) => void;
9
}
10

11
export const useTodoStore = create<TodoState>()(
12
  devtools(
13
    persist(
14
      immer(
15
        subscribeWithSelector((set) => ({
16
          todos: [],
17
          addTodo: (text) =>
18
            set((state) => {
19
              // immer 中间件允许直接修改（内部产生不可变更新）
20
              state.todos.push({
21
                id: Date.now(),
22
                text,
23
                done: false,
24
              });
25
            }),
26
          toggleTodo: (id) =>
27
            set((state) => {
28
              const todo = state.todos.find((t) => t.id === id);
29
              if (todo) todo.done = !todo.done;
30
            }),
31
        }))
32
      ),
33
      { name: 'todo-storage' } // persist 配置
34
    ),
35
    { name: 'TodoStore' } // devtools 配置
36
  )
37
);
38

39
// 精确订阅：只在 todos 长度变化时触发
40
useTodoStore.subscribe(
41
  (state) => state.todos.length,
42
  (length, prevLength) => {
43
    console.log(`Todo count changed: ${prevLength} → ${length}`);
44
  }
45
);

1
import { atom } from 'jotai';
2

3
// 基础原子
4
const countAtom = atom(0);
5
const nameAtom = atom('World');
6

7
// 派生原子（只读）
8
const greetingAtom = atom((get) => {
9
  const name = get(nameAtom);
10
  const count = get(countAtom);
11
  return `Hello, ${name}! You clicked ${count} times.`;
12
});
13

14
// 可写派生原子
15
const incrementAtom = atom(
16
  null, // 读取值为 null（只写原子）
17
  (get, set) => {
18
    set(countAtom, get(countAtom) + 1);
19
  }
20
);
21

22
// 异步原子
23
const userAtom = atom(async () => {
24
  const response = await fetch('/api/user');
25
  return response.json();
26
});
27

28
// 带缓存的异步原子
29
const userByIdAtom = atom(async (get) => {
30
  const id = get(userIdAtom);
31
  const response = await fetch(`/api/users/${id}`);
32
  return response.json();
33
});

1
// Jotai 内部原理（简化）
2
class Store {
3
  // 每个原子的当前值
4
  private atomValues = new WeakMap<Atom, unknown>();
5
  // 依赖图：原子 A 依赖了哪些原子
6
  private atomDependencies = new WeakMap<Atom, Set<Atom>>();
7
  // 反向依赖：谁依赖了原子 A
8
  private atomDependents = new WeakMap<Atom, Set<Atom>>();
9
  // 订阅者（UI 组件）
10
  private atomSubscribers = new WeakMap<Atom, Set<() => void>>();
11

12
  get<T>(atom: Atom<T>): T {
13
    if (typeof atom.read === 'function') {
14
      // 派生原子：执行 read 函数并追踪依赖
15
      const dependencies = new Set<Atom>();
16
      const getter = (depAtom: Atom) => {
17
        dependencies.add(depAtom);
18
        // 注册反向依赖
19
        this.addDependent(depAtom, atom);
20
        return this.get(depAtom);
21
      };
22

23
      const value = atom.read(getter);
24
      this.atomDependencies.set(atom, dependencies);
25
      this.atomValues.set(atom, value);
26
      return value as T;
27
    }
28

29
    // 基础原子：直接返回值
30
    return (this.atomValues.get(atom) ?? atom.init) as T;
31
  }
32

33
  set<T>(atom: Atom<T>, value: T): void {
34
    const prevValue = this.atomValues.get(atom);
35
    if (Object.is(prevValue, value)) return;
36

37
    this.atomValues.set(atom, value);
38

39
    // 通知所有依赖此原子的派生原子重新计算
40
    this.notifyDependents(atom);
41

42
    // 通知 UI 订阅者
43
    this.notifySubscribers(atom);
44
  }
45

46
  private notifyDependents(atom: Atom): void {
47
    const dependents = this.atomDependents.get(atom);
48
    if (!dependents) return;
49

50
    for (const dependent of dependents) {
51
      // 重新计算派生原子
52
      this.get(dependent);
53
      // 递归通知
54
      this.notifyDependents(dependent);
55
      this.notifySubscribers(dependent);
56
    }
57
  }
58
}

1
import { atom } from 'jotai';
2
import { atomWithStorage, atomWithDefault, splitAtom } from 'jotai/utils';
3

4
// 持久化原子 - 自动同步到 localStorage
5
const themeAtom = atomWithStorage('theme', 'light');
6

7
// 带默认值的异步原子
8
const configAtom = atomWithDefault(async () => {
9
  const res = await fetch('/api/config');
10
  return res.json();
11
});
12

13
// 列表拆分 - 每个列表项成为独立原子
14
interface Todo {
15
  id: number;
16
  text: string;
17
  done: boolean;
18
}
19

20
const todosAtom = atom<Todo[]>([]);
21
const todoAtomsAtom = splitAtom(todosAtom);
22
// todoAtomsAtom 的值是 Atom<Todo>[] —— 每个 todo 是独立原子
23
// 修改单个 todo 不会导致整个列表重新渲染
24

25
// 族原子 - 参数化创建
26
const todoAtomFamily = (id: number) =>
27
  atom(
28
    (get) => get(todosAtom).find((t) => t.id === id),
29
    (get, set, update: Partial<Todo>) => {
30
      set(todosAtom, (prev) =>
31
        prev.map((t) => (t.id === id ? { ...t, ...update } : t))
32
      );
33
    }
34
  );

1
// TC39 Signal 提案的 API（2026 年规范草案）
2
// 注意：实际语法可能随提案演进而变化
3

4
// 基础 Signal
5
const count = new Signal.State(0);
6
console.log(count.get()); // 0
7
count.set(1);
8
console.log(count.get()); // 1
9

10
// 计算 Signal（自动追踪依赖）
11
const doubled = new Signal.Computed(() => count.get() * 2);
12
console.log(doubled.get()); // 2
13

14
// 当 count 变化时，doubled 自动更新
15
count.set(5);
16
console.log(doubled.get()); // 10

1
// Signals 内部原理（简化实现）
2
let currentComputed: Computed | null = null;
3

4
class Signal<T> {
5
  private value: T;
6
  private subscribers = new Set<Computed>();
7
  private version = 0;
8

9
  constructor(initialValue: T) {
10
    this.value = initialValue;
11
  }
12

13
  get(): T {
14
    // 如果当前有 Computed 正在执行，自动注册依赖
15
    if (currentComputed) {
16
      this.subscribers.add(currentComputed);
17
      currentComputed.dependencies.add(this);
18
    }
19
    return this.value;
20
  }
21

22
  set(newValue: T): void {
23
    if (Object.is(this.value, newValue)) return;
24
    this.value = newValue;
25
    this.version++;
26

27
    // 通知所有依赖的 Computed：你的依赖变了，标记为脏
28
    for (const sub of this.subscribers) {
29
      sub.markDirty();
30
    }
31
  }
32
}
33

34
class Computed<T> {
35
  private value: T | undefined;
36
  private dirty = true;
37
  private fn: () => T;
38
  dependencies = new Set<Signal>();
39
  private subscribers = new Set<Computed>();
40

41
  constructor(fn: () => T) {
42
    this.fn = fn;
43
  }
44

45
  get(): T {
46
    // 自动依赖追踪
47
    if (currentComputed) {
48
      this.subscribers.add(currentComputed);
49
    }
50

51
    // 惰性求值：只在被读取且标记为脏时才重新计算
52
    if (this.dirty) {
53
      this.recompute();
54
    }
55
    return this.value!;
56
  }
57

58
  markDirty(): void {
59
    if (!this.dirty) {
60
      this.dirty = true;
61
      // 级联标记下游为脏
62
      for (const sub of this.subscribers) {
63
        sub.markDirty();
64
      }
65
    }
66
  }
67

68
  private recompute(): void {
69
    // 清除旧依赖
70
    for (const dep of this.dependencies) {
71
      dep.subscribers?.delete(this);
72
    }
73
    this.dependencies.clear();
74

75
    // 设置当前追踪上下文
76
    const prev = currentComputed;
77
    currentComputed = this;
78

79
    try {
80
      this.value = this.fn();
81
    } finally {
82
      currentComputed = prev;
83
    }
84

85
    this.dirty = false;
86
  }
87
}
88

89
// 效果（副作用）
90
class Effect {
91
  private fn: () => void;
92
  private dirty = true;
93
  dependencies = new Set<Signal>();
94

95
  constructor(fn: () => void) {
96
    this.fn = fn;
97
    this.run(); // 立即执行一次以收集依赖
98
  }
99

100
  run(): void {
101
    const prev = currentComputed;
102
    currentComputed = this as any;
103
    try {
104
      this.fn();
105
    } finally {
106
      currentComputed = prev;
107
    }
108
    this.dirty = false;
109
  }
110

111
  markDirty(): void {
112
    if (!this.dirty) {
113
      this.dirty = true;
114
      // 调度异步执行（微任务）
115
      queueMicrotask(() => {
116
        if (this.dirty) this.run();
117
      });
118
    }
119
  }
120
}

1
<!-- 传统 Vue 组件 -->
2
<script setup>
3
import { ref, computed } from 'vue';
4

5
const count = ref(0);
6
const doubled = computed(() => count.value * 2);
7
</script>
8

9
<template>
10
  <div>
11
    <p>Count: {{ count }}</p>
12
    <p>Doubled: {{ doubled }}</p>
13
    <button @click="count++">+1</button>
14
  </div>
15
</template>

1
// Vapor Mode 编译后（概念性示例）
2
// 不再生成虚拟 DOM，直接生成 DOM 操作指令
3
import { ref, computed, renderEffect, setText, on } from 'vue/vapor';
4

5
export default () => {
6
  const count = ref(0);
7
  const doubled = computed(() => count.value * 2);
8

9
  // 直接创建 DOM 节点
10
  const div = document.createElement('div');
11
  const p1 = document.createElement('p');
12
  const p2 = document.createElement('p');
13
  const button = document.createElement('button');
14

15
  // 细粒度绑定：只更新变化的文本节点
16
  renderEffect(() => setText(p1, `Count: ${count.value}`));
17
  renderEffect(() => setText(p2, `Doubled: ${doubled.value}`));
18

19
  button.textContent = '+1';
20
  on(button, 'click', () => count.value++);
21

22
  div.append(p1, p2, button);
23
  return div;
24
};

1
// Solid.js 风格的 Signals（框架无关的理解）
2
import { createSignal, createMemo, createEffect, batch } from 'solid-js';
3

4
// 基础信号
5
const [count, setCount] = createSignal(0);
6
const [name, setName] = createSignal('World');
7

8
// 派生计算（自动追踪依赖）
9
const greeting = createMemo(() => `Hello ${name()}, count is ${count()}`);
10

11
// 副作用（自动追踪并在依赖变化时重新执行）
12
createEffect(() => {
13
  console.log(greeting()); // 当 count 或 name 变化时自动执行
14
});
15

16
// 批量更新（避免中间状态触发多次计算）
17
batch(() => {
18
  setCount(10);
19
  setName('Alice');
20
  // effect 只会执行一次
21
});

1
// === Pinia ===
2
// 定义
3
const useStore = defineStore('id', () => {
4
  const count = ref(0);
5
  const doubled = computed(() => count.value * 2);
6
  const increment = () => count.value++;
7
  return { count, doubled, increment };
8
});
9
// 使用（Vue 组件中）
10
const store = useStore();
11
store.increment();
12
console.log(store.count, store.doubled);
13

14

15
// === Zustand ===
16
// 定义
17
const useStore = create((set, get) => ({
18
  count: 0,
19
  doubled: () => get().count * 2, // 注意：不是自动计算的
20
  increment: () => set((s) => ({ count: s.count + 1 })),
21
}));
22
// 使用
23
const count = useStore((s) => s.count); // 选择器
24

25

26
// === Jotai ===
27
// 定义
28
const countAtom = atom(0);
29
const doubledAtom = atom((get) => get(countAtom) * 2);
30
const incrementAtom = atom(null, (get, set) => {
31
  set(countAtom, get(countAtom) + 1);
32
});
33
// 使用
34
const [count, setCount] = useAtom(countAtom);
35
const doubled = useAtomValue(doubledAtom);
36

37

38
// === Signals (TC39) ===
39
// 定义
40
const count = new Signal.State(0);
41
const doubled = new Signal.Computed(() => count.get() * 2);
42
// 使用
43
count.set(count.get() + 1);
44
console.log(doubled.get());

1
// 假设有 1000 个组件订阅了同一个 Store
2
// Store 中有 100 个属性，但只更新了 1 个属性
3

4
// Pinia (Vue):
5
// - Proxy 精确追踪到哪些组件用了哪个属性
6
// - 只有用到被修改属性的组件会重新渲染
7
// - 但仍需经过虚拟 DOM diff
8

9
// Zustand:
10
// - 依赖开发者写选择器来避免不必要的重渲染
11
// - 没写选择器 → 所有消费者都会被通知
12
// - 有 shallow 比较优化
13

14
// Jotai:
15
// - 每个原子独立，更新一个原子只影响订阅了它的组件
16
// - 天然细粒度，不需要手动优化
17

18
// Signals:
19
// - 最细粒度：更新直接传播到使用该值的 DOM 节点
20
// - 跳过虚拟 DOM diff
21
// - 理论上是性能最优的方案

1
// 场景 1: Vue 3 中大型项目
2
// 推荐: Pinia
3
// 理由: 官方支持、DevTools 完美集成、团队学习成本低
4
const useAuthStore = defineStore('auth', () => { /* ... */ });
5
const useCartStore = defineStore('cart', () => { /* ... */ });
6

7
// 场景 2: 需要跨框架共享状态
8
// 推荐: Zustand 或 Signals
9
// 理由: 框架无关，可以在任何环境中使用
10
const store = createStore((set) => ({
11
  theme: 'light',
12
  toggleTheme: () => set((s) => ({
13
    theme: s.theme === 'light' ? 'dark' : 'light'
14
  })),
15
}));
16

17
// 场景 3: 表单状态管理（大量独立字段）
18
// 推荐: Jotai
19
// 理由: 每个字段是独立原子，修改一个字段不会触发其他字段重渲染
20
const nameAtom = atom('');
21
const emailAtom = atom('');
22
const ageAtom = atom(0);
23
const formValidAtom = atom((get) => {
24
  return get(nameAtom).length > 0 && get(emailAtom).includes('@');
25
});
26

27
// 场景 4: 高频更新的实时数据（如股票、游戏）
28
// 推荐: Signals
29
// 理由: 最小化更新开销，跳过虚拟 DOM
30
const price = new Signal.State(100.0);
31
const change = new Signal.Computed(() => {
32
  const p = price.get();
33
  return ((p - 100) / 100 * 100).toFixed(2) + '%';
34
});