最基本的 reactive 实现

实现目标

实现一个最简单的 reactive 函数，能够：

使用 Proxy 拦截对象的读取和修改操作
在读取属性时调用 track 收集依赖
在修改属性时调用 trigger 触发更新

核心代码实现

1. reactive 函数

reactive 函数接收一个普通对象，返回一个 Proxy 代理对象：

1
import { track, trigger } from './effect'
2

3
export function reactive<T extends object>(target: T): T
4
export function reactive(target: object) {
5
  const proxy = new Proxy(target, {
6
    get(target, key) {
7
      // 收集依赖
8
      track(target, key)
9
      // 返回对象的相应属性值
10
      const result = Reflect.get(target, key)
11
      return result
12
    },
13
    set(target, key, value) {
14
      // 触发更新
15
      trigger(target, key)
16
      // 设置对象的相应属性值
17
      const result = Reflect.set(target, key, value)
18
      return result
19
    },
20
  })
21

22
  return proxy
23
}

2. track 和 trigger 函数

目前只是打印日志，后续会实现真正的依赖收集和触发更新：

1
export function track(target: object, key: unknown) {
2
  console.log(`target ${JSON.stringify(target)} 依赖收集：${key}属性被读取了`)
3
}
4

5
export function trigger(target: object, key: unknown) {
6
  console.log(`target ${JSON.stringify(target)} 触发更新：${key}属性被修改了`)
7
}

关键点解析

为什么使用 Reflect？

在 Proxy 的 handler 中，推荐使用 Reflect 而不是直接操作 target：

1
// 不推荐
2
get(target, key) {
3
  return target[key]
4
}
5

6
// 推荐
7
get(target, key) {
8
  return Reflect.get(target, key)
9
}

原因：

Reflect 方法的返回值更合理（如 Reflect.set 返回布尔值表示是否成功）
Reflect 可以正确处理 this 指向问题
与 Proxy 的 trap 方法一一对应，语义更清晰

可以阅读 Reflect 原理笔记结合理解。

函数重载

1
export function reactive<T extends object>(target: T): T
2
export function reactive(target: object) {
3
  // ...
4
}

使用函数重载可以保留原对象的类型信息，让 TypeScript 能够正确推断返回值类型。

测试示例

创建一个简单的 HTML 文件测试：

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
    <title>basic-reactive</title>
7
  </head>
8
  <body>
9
    <script type="module">
10
      import { reactive } from '../dist/reactivity.esm.js'
11

12
      const raw = { count: 1 }
13
      const proxyRaw = reactive(raw)
14

15
      // 读取属性，触发 track
16
      console.log(proxyRaw.count)
17
      // 输出: target {"count":1} 依赖收集：count属性被读取了
18
      // 输出: 1
19

20
      // 修改属性，触发 trigger
21
      proxyRaw.count++
22
      // 输出: target {"count":1} 依赖收集：count属性被读取了
23
      // 输出: target {"count":2} 触发更新：count属性被修改了
24
    </script>
25
  </body>
26
</html>

小结

这个最基本的 reactive 实现展示了响应式系统的核心思路：

使用 Proxy 拦截对象的读写操作
在 get 中调用 track 收集依赖
在 set 中调用 trigger 触发更新
使用 Reflect 确保操作的正确性

虽然功能还不完整，但已经搭建好了响应式系统的基本框架。