user_4a13383d 2026-09-16 11:58 4 次浏览 Vue

手搓一个Tiny版本的vue

这篇文章写一个**最小可跑的 Tiny Vue**：不做 VNode、不做 Diff、不做组件系统、不做异步批量更新，只实现一条链路——`reactive` 拦截读写、`effect` 登记副作用、`track` 收集依赖、`trigger` 派发更新，最后 `state.count++` 立即更新 DOM。它适合面试前背下来当作响应式核心的「最小骨架」。

## 目录

- [一、这次只实现什么](#一这次只实现什么)
- [二、先跑通主线：第一版 Tiny Vue](#二先跑通主线第一版-tiny-vue)
- [三、一次 `state.count++` 的执行追踪](#三一次-statecount-的执行追踪)
- [四、边界拆解：你问的那些「为什么」](#四边界拆解你问的那些为什么)
- [五、总结](#五总结)

## 一、这次只实现什么

先明确**范围**，别一上来就想着把 Vue 3 源码全搬进来。这个 Tiny Vue 只做一件事：

```text
reactive()         创建响应式对象
    ↓
Proxy              get/set 拦截读写
    ↓
读取 state.count   进入 get → track 收集 effect
    ↓
修改 state.count   进入 set → trigger 找到 effect
    ↓
重新执行 effect     DOM 立即更新
```

使用方式尽量贴近 Vue：

```javascript
const state = reactive({ count: 1 });

effect(() => {
  document.querySelector('#app').innerHTML = `<p>count: ${state.count}</p>`;
});

state.count++; // 页面上的 count: 1 立即变成 count: 2
```

所以这个版本**明确不要**的东西是：

- 不要 **VNode / Diff / Patch**：我们直接改 `innerHTML`，不需要「用 JS 描述 DOM、再对比新旧」那套。
- 不要 **组件系统**：只有一个 `effect` 在改 DOM，没有 `setup`/`render`。
- 不要 **异步批量更新 / scheduler / nextTick**：`state.count++` 之后**同步**触发更新，不做去重排队。

后面想往真实 Vue 靠，再一层层加 `ref` → `computed` → `watch` → 组件 → VNode → Diff → scheduler。但第一次先把「依赖收集 → 触发更新」这条最核心的线吃透。

## 二、先跑通主线：第一版 Tiny Vue

### 1. 术语先讲人话

| 术语 | 白话解释 |
| --- | --- |
| `Proxy` | 给对象套一层「代理」，所有读写都先经过它，像前台替你收发快递 |
| `track` | 依赖收集：记录「谁在 `effect` 里读了我这个属性」 |
| `trigger` | 派发更新：通知「读过我这个属性的 effect，我变了，重新执行」 |
| `effect` | 副作用函数：数据变了要重新执行的那段代码（这里就是更新 DOM） |
| `activeEffect` | 当前正在执行的 effect；`track` 只收集它，别的读取一概不理 |
| `WeakMap → Map → Set` | 三层依赖表：`对象 → 属性 → effect 集合`，逐层缩小查询范围 |
| `Reflect.get` / `Reflect.set` | JS 标准的属性读写；其中 `Reflect.set` 会返回「成功 / 失败」布尔值 |
| `receiver` | 这次属性操作「最终针对谁」，决定 getter/setter 里的 `this` 指向 |

### 2. 完整代码

只用四个东西——`effect`、`reactive`、`track`、`trigger`：

```javascript
let activeEffect = null;

// ====================
// 1. effect：登记副作用
// ====================
function effect(fn) {
  activeEffect = fn; // 标记「现在执行的是 fn」，让 track 知道该收集谁
  fn();              // 执行 fn，内部读取响应式数据时触发 track
  activeEffect = null; // fn 执行完，清空标记，防止后续普通读取被误收集
}

// ====================
// 2. reactive：用 Proxy 拦截读写
// ====================
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      track(target, key); // 谁读我，我就记住谁
      return value;
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      trigger(target, key); // 我变了，通知读过我的人
      return result;        // 告诉 Proxy 这次赋值成功还是失败
    }
  });
}

// ====================
// 3. track：依赖收集
// ====================
const depsMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 不在 effect 里读取，不收集（关键边界）

let deps = depsMap.get(target); // 第一层：对象
  if (!deps) {
    deps = new Map();
    depsMap.set(target, deps);
  }

let effects = deps.get(key); // 第二层：属性
  if (!effects) {
    effects = new Set();
    deps.set(key, effects);
  }

effects.add(activeEffect); // 第三层：effect 集合（Set 自动去重）
}

// ====================
// 4. trigger：派发更新
// ====================
function trigger(target, key) {
  const deps = depsMap.get(target);
  if (!deps) return; // 这个对象从来没被收集过，直接返回

const effects = deps.get(key);
  if (!effects) return; // 这个属性没人依赖，直接返回

effects.forEach(effect => effect()); // 逐个重新执行
}
```

### 3. 这样用

```javascript
const state = reactive({ count: 1 });

effect(() => {
  document.querySelector('#app').innerHTML = `<p>count: ${state.count}</p>`;
});

state.count++; // 立即触发 DOM 更新
```

第一次执行 `effect` 时，函数里读了 `state.count`，于是 `count` 被登记成「这个 effect 依赖我」。之后 `state.count++` 触发 `set`，`trigger` 找到这个 effect 重新执行，页面就变了。

## 三、一次 `state.count++` 的执行追踪

把 `state.count++` 拆开，可以粗略理解成「先读、后写」两步：

```javascript
const oldValue = state.count; // 读 → get → track（但此时 activeEffect 是 null，直接跳过）
state.count = oldValue + 1;   // 写 → set → trigger
```

用一张表追踪完整链路：

| 阶段 | 发生了什么 | 关键变量 / 结果 |
| --- | --- | --- |
| 1 | `reactive({ count: 1 })` | 返回一个 `Proxy`，原对象被代理 |
| 2 | `effect(fn)` 开始 | `activeEffect = fn` |
| 3 | 执行 `fn()`，读取 `state.count` | 进入 `get` → `track(target, 'count')` |
| 4 | `track` 看到 `activeEffect` 存在 | `depsMap` 建立 `state → count → {fn}` |
| 5 | `fn()` 执行完 | `activeEffect = null` |
| 6 | `state.count++` 先读 | `get` → `track`，但 `activeEffect` 是 `null`，直接返回（无副作用） |
| 7 | `state.count++` 后写 `count = 2` | 进入 `set` → `trigger(target, 'count')` |
| 8 | `trigger` 取出 `{fn}` | `fn()` 重新执行 |
| 9 | `fn` 重新读 `state.count`（已是 2） | DOM 更新为 `count: 2` |

注意第 6 步：`count++` 的「读」也会走一遍 `get → track`，但那时 `activeEffect` 已经是 `null`，`track` 开头那句 `if (!activeEffect) return` 直接把它挡掉。这也解释了为什么那行判断不能删——没有它，任何一次「effect 之外的读取」都会被当成依赖收集。

## 四、边界拆解：你问的那些「为什么」

这一节把几个最容易绕进去的问题逐个拆开。每个都按「**判断的是什么 → 为什么需要 → 删除后怎样 → 最小例子**」来回答。

### 4.1 为什么 `set` 返回 `result`，而不是 `target`

你可能想当然地写成这样：

```javascript
set(target, key, value) {
  target[key] = value;
  trigger(target, key);
  return target; // ❌ 想返回「改完的对象」
}
```

**判断的是什么**：`Proxy` 的 `set` 陷阱返回值会被转成布尔值——`true` 表示「赋值成功」，`false` 表示「赋值失败」。它根本不需要你返回对象。

**为什么需要**：`return target` 返回的是对象，虽然对象是 truthy（碰巧能被当成成功），但语义完全错了。更关键的是：`set` 陷阱的返回值是用来**汇报这次赋值成功还是失败**的，返回一个对象是在答非所问。

**删除后（改成 `return target` 或不写 return）会怎样**：不写 `return`（返回 `undefined`，是 falsy）时，在严格模式下 `proxy.count = 10` 会直接抛 `TypeError`，因为赋值被判成「失败」。

```javascript
'use strict';
const proxy = new Proxy({}, {
  set(target, key, value) {
    target[key] = value;
    // 没有 return → 返回 undefined → falsy → 赋值失败
  }
});

proxy.count = 10; // TypeError: 'set' on proxy: trap returned falsish
```

**正确写法**：`Reflect.set(target, key, value, receiver)` 本身就是一次标准赋值，并且返回「成功 / 失败」布尔值，所以：

```javascript
const result = Reflect.set(target, key, value, receiver); // 既赋值，又拿到真实结果
trigger(target, key);
return result; // 如实告诉 Proxy：这次写进去没有
```

### 4.2 `receiver` 到底有什么用

这是三个问题里最容易绕的一个。先记一句话：**`receiver` 表示「这次属性操作最终针对谁」，它决定 getter / setter 里的 `this` 指向**。

对于你现在的 `reactive({ count: 1 })` 这种普通对象，传不传 `receiver` **结果完全一样**。因为普通对象没有 getter/setter，也没有原型链上的访问器属性。`receiver` 是为下面这类场景准备的：

```javascript
const parent = {
  set name(value) {
    console.log('setter 里的 this 是：', this);
  }
};
const child = Object.create(parent); // child 自己没有 name，setter 在原型 parent 上
```

**不传 `receiver`**：

```javascript
Reflect.set(child, 'name', 'Tom'); // receiver 缺省为 child
// 打印：setter 里的 this 是 child
```

**通过 Proxy 并传入 `receiver`**：

```javascript
const proxy = new Proxy(child, {
  set(target, key, value, receiver) {
    return Reflect.set(target, key, value, receiver); // 关键：把 receiver 传进去
  }
});

proxy.name = 'Tom'; // receiver === proxy
// 打印：setter 里的 this 是 proxy，而不是原始的 child
```

差别就在这里：**不传 `receiver`，setter 里的 `this` 是原始对象；传了 `receiver`，`this` 是代理对象**。

### 4.3 为什么 Vue 的 Proxy 非要传 `receiver`

因为只有让 `this` 指向代理，响应式才能**穿透 setter 继续生效**。看这个更贴近真实场景的例子：

```javascript
const target = {
  _count: 0,
  get count() { return this._count; },
  set count(value) { this._count = value; } // 内部写的是 this._count
};

// 传 receiver 的版本
const proxy = new Proxy(target, {
  get(t, key, receiver) { return Reflect.get(t, key, receiver); },
  set(t, key, value, receiver) { return Reflect.set(t, key, value, receiver); }
});

proxy.count = 1;
// 步骤：set count → 进入 setter → this._count = value
//      因为 this === proxy，等价于 proxy._count = 1 → 再次进入 set 陷阱
// 结果：_count 的赋值也走了一遍 Proxy，能被 track/trigger 感知
```

如果不传 `receiver`：

```javascript
const proxy = new Proxy(target, {
  set(t, key, value) { return Reflect.set(t, key, value); } // 漏掉 receiver
});

proxy.count = 1;
// 步骤：set count → 进入 setter → this._count = value
//      此时 this === target（原始对象），this._count 直接改原始对象
// 结果：_count 的赋值绕过 Proxy，响应式系统完全感知不到
```

**为什么需要**：真实 JavaScript 对象有 getter/setter、原型继承、访问器属性，这些内部还会读写别的属性。传 `receiver` 让这些「内部读写」也落在代理上，从而继续被响应式系统追踪。

**删除后会怎样**：`_count` 这类被 setter 间接修改的属性，变化后不会触发任何更新；你的响应式会「漏掉」一部分依赖。对于 `{ count: 1 }` 这种简单对象它无感，但对于带访问器的对象就是 bug。

### 4.4 为什么不直接 `return true`

对于这个 Tiny Vue，其实**可以**直接返回 `true`：

```javascript
set(target, key, value, receiver) {
  Reflect.set(target, key, value, receiver);
  trigger(target, key);
  return true; // 对 { count: 1 } 完全够用
}
```

甚至为了学习，第一版就这么写反而更容易理解。

**为什么真实 Vue 还是用 `return result`**：因为 `Reflect.set` 已经帮我们算好了真实结果——给只读属性、冻结对象赋值时会返回 `false`。直接 `return true` 是在「撒谎」：

```javascript
const obj = {};
Object.defineProperty(obj, 'count', { value: 1, writable: false }); // 只读

const proxy = new Proxy(obj, {
  set(t, key, value, receiver) {
    const result = Reflect.set(t, key, value, receiver); // 只读 → result === false
    if (result) trigger(t, key); // 写不进去就不该触发更新
    return result;               // 如实返回失败
  }
});

proxy.count = 2; // 静默失败（严格模式下抛错），且不会触发一次假更新
```

如果这里写死 `return true`，`proxy.count = 2` 会「看起来成功」，甚至 `trigger` 还会派发一次根本不该发生的更新。`return result` 让「赋值结果」和「是否触发更新」保持一致。所以结论是：

- 学习 Tiny Vue：`return true` 够用、更好懂。
- 靠近真实源码：`return result` 更严谨，因为它不假设赋值一定成功。

### 4.5 为什么 `effect` 执行完要把 `activeEffect = null`

你问的是这里：

```javascript
function effect(fn) {
  activeEffect = fn;  // 开始执行 effect
  fn();               // 收集依赖
  activeEffect = null; // effect 执行完，清空
}
```

**判断的是什么**：`activeEffect` 表示「当前正在执行的 effect 是谁」，它只应该在 `fn()` 执行期间存在。

**为什么需要**：`track` 只认 `activeEffect`。一旦 `fn()` 执行完，后面任何普通读取都不该再被收集。

**删除后会怎样**：effect 执行完之后，代码里的普通读取会被误当成依赖：

```javascript
effect(() => {
  console.log(state.count); // 这里正确收集 count → fn
});

// effect 已经执行完了
console.log(state.name); // ❌ 如果 activeEffect 没清空，这里会把 fn 也收集到 name 上
```

于是产生了错误的依赖关系：

```text
count → fn  ✅（正确）
name  → fn  ❌（错误：fn 根本没在 effect 里读过 state.name）
```

之后只要改 `state.name`，就会无缘无故触发这个 effect 重新执行一次。可以把 `activeEffect` 想成「当前值班的人」：

```text
effect 开始      → activeEffect = 小明（小明上班）
读取 count      → 记录：count → 小明
effect 结束      → activeEffect = null（小明下班）

如果小明不下班，后面别人读取 name：
读取 name       → 系统以为小明还在上班 → 记录：name → 小明 ❌
```

**最小例子**：把 `activeEffect = null` 注释掉再跑，会看到 `state.name = 'x'` 也触发了那个本不该再跑的 effect。

> 补充一句：这个 Tiny Vue 是最简版，真实 Vue 3 用的是 `ReactiveEffect` + effect 栈（`effectStack`）来处理嵌套 effect，不会简单到只有一个 `activeEffect = null`。但现在先把「设置当前 effect → 执行并收集 → 清除当前 effect」这个基本模型吃透就够了。

## 五、总结

- Tiny Vue 的核心只有一条线：`reactive`（Proxy 拦截）→ `track`（收集依赖）→ 修改数据 → `trigger`（派发更新）→ `effect` 重新执行 → DOM 更新。
- 依赖表用 `WeakMap → Map → Set` 三层，分别解决「哪个对象、哪个属性、哪些 effect」的问题。
- `set` 陷阱要返回布尔值（`Reflect.set` 的结果），表示赋值成功/失败，而不是返回对象；不写 return 在严格模式下会抛错。
- `receiver` 决定 getter/setter 里的 `this` 指向，传了它，setter 内部对别的属性的读写才会继续走 Proxy、保持响应式。
- 学习版可以 `return true`，但真实 Vue 用 `return result` 更严谨——写不进去就不该触发更新。
- `activeEffect = null` 保证「只在 effect 执行期间收集依赖」，否则 effect 外的普通读取会被误收集，产生虚假的依赖关系。

完整可运行案例见 [examples/tinyVue.html](../examples/tinyVue.html)，用浏览器打开即可观察 `state.count++` 触发 DOM 更新。文中四个边界问题的复现代码都写在正文里，复制到控制台即可验证。本文和案例只做静态编写，未在本地执行。