From 5a24b61edfdee9c39b04b9fda198780c441331ab Mon Sep 17 00:00:00 2001
From: dj <1042039504@qq.com>
Date: Tue, 3 Feb 2026 22:18:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(core):=20=E5=AE=9E=E7=8E=B0=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E6=80=A7=E7=B3=BB=E7=BB=9F=E7=9A=84=E6=A0=B8=E5=BF=83?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 effect 函数用于创建响应性副作用
- 实现 ReactiveEffect 类来管理响应性执行
- 添加 track 函数用于依赖收集
- 添加 trigger 函数用于触发依赖更新
- 在 baseHandlers 中实现 Proxy 的 get 和 set 拦截器
- 将 effect 导出到 vue 包的入口文件
- 添加 dev 脚本用于监听构建
- 更新示例文件展示响应性功能的使用
- 修复 README.md 中代码块格式问题
---
 README.md                                     |  4 ++-
 package.json                                  |  1 +
 packages/reactivity/src/baseHandlers.ts       | 30 ++++++++++++++++-
 packages/reactivity/src/effect.ts             | 33 +++++++++++++++++++
 packages/reactivity/src/index.ts              |  1 +
 .../vue/examples/reactivity/reactive.html     |  9 ++---
 packages/vue/src/index.ts                     |  2 +-
 7 files changed, 73 insertions(+), 7 deletions(-)
 create mode 100644 packages/reactivity/src/effect.ts

diff --git a/README.md b/README.md
index 14d8f1d..3f66e9a 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,11 @@
 # .prettierrc
 
+```
 {
 "semi": false,// 结尾无分号
 "singleQuote": true,// 单引号
 "printWidth": 80,// 每行长度为80
 "trailingComma": "none",// 不添加尾随逗号
 "arrowParens": "avoid"// 省略箭头函数的括号
-}
\ No newline at end of file
+}
+```
\ No newline at end of file
diff --git a/package.json b/package.json
index 0af703b..3b9e4f6 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
+    "dev": "rollup -c -w",
     "build": "rollup -c",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
diff --git a/packages/reactivity/src/baseHandlers.ts b/packages/reactivity/src/baseHandlers.ts
index ed402aa..a8d1d9f 100644
--- a/packages/reactivity/src/baseHandlers.ts
+++ b/packages/reactivity/src/baseHandlers.ts
@@ -1,4 +1,32 @@
 /**
  * 响应性的handler
  */
-export const mutableHandlers: ProxyHandler<object> = {}
+import { track, trigger } from './effect'
+
+const get = createGetter()
+function createGetter() {
+  return function get(target: object, key: string | symbol, receiver: object) {
+    const res = Reflect.get(target, key, receiver)
+    track(target, key)
+    return res
+  }
+}
+
+const set = createSetter()
+function createSetter() {
+  return function set(
+    target: object,
+    key: string | symbol,
+    value: unknown,
+    receiver: object
+  ) {
+    const result = Reflect.set(target, key, value, receiver)
+    trigger(target, key, value)
+    return result
+  }
+}
+
+export const mutableHandlers: ProxyHandler<object> = {
+  get,
+  set
+}
diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts
new file mode 100644
index 0000000..b593b86
--- /dev/null
+++ b/packages/reactivity/src/effect.ts
@@ -0,0 +1,33 @@
+export function effect<T = any>(fn: () => T) {
+  const _effect = new ReactiveEffect(fn)
+  _effect.run()
+}
+
+export let activeEffect: ReactiveEffect | undefined
+
+export class ReactiveEffect<T = any> {
+  constructor(public fn: () => T) {}
+  run() {
+    activeEffect = this
+    return this.fn()
+  }
+}
+
+/**
+ * 收集依赖
+ * @param target
+ * @param key
+ */
+export function track(target: object, key: unknown) {
+  console.log('收集依赖 track')
+}
+
+/**
+ * 触发依赖
+ * @param target
+ * @param key
+ * @param newValue
+ */
+export function trigger(target: object, key: unknown, newValue: unknown) {
+  console.log('触发依赖 trigger')
+}
diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts
index 33ea422..57ad7ec 100644
--- a/packages/reactivity/src/index.ts
+++ b/packages/reactivity/src/index.ts
@@ -1 +1,2 @@
 export { reactive } from './reactive'
+export { effect } from './effect'
diff --git a/packages/vue/examples/reactivity/reactive.html b/packages/vue/examples/reactivity/reactive.html
index 7748aa4..f23a65f 100644
--- a/packages/vue/examples/reactivity/reactive.html
+++ b/packages/vue/examples/reactivity/reactive.html
@@ -6,14 +6,15 @@
     <script src="../../dist/vue.js"></script>
 </head>
 <body>
-
+<div id="app"></div>
 </body>
 <script>
-    const { reactive } = Vue
-    console.log(reactive)
+    const { reactive,effect } = Vue
     const obj=reactive({
         name:'张三'
     })
-    console.log(obj)
+    effect(()=>{
+        document.querySelector('#app').innerText=obj.name
+    })
 </script>
 </html>
\ No newline at end of file
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
index 66bdf72..9fd7656 100644
--- a/packages/vue/src/index.ts
+++ b/packages/vue/src/index.ts
@@ -1 +1 @@
-export { reactive } from '@vue/reactivity'
+export { reactive, effect } from '@vue/reactivity'