refactor(reactivity): 重构响应式系统依赖收集机制

- 将依赖管理逻辑分离到独立的dep模块 - 创建Dep类型定义和createDep工厂函数 - 修改KeyToDepMap类型以使用Dep集合替代单个ReactiveEffect - 添加trackEffects函数用于统一跟踪依赖 - 实现triggerEffects函数用于批量触发依赖 - 增加triggerEffect函数用于触发单个依赖 - 在effect运行时添加注释说明首次getter触发 - 添加HTML示例文件验证多依赖收集功能
2026-02-04 23:25:32 +08:00
parent 0850e05bd1
commit 668ecda610
3 changed files with 79 additions and 9 deletions
--- a/packages/vue/examples/reactivity/reactive-dep.html
+++ b/packages/vue/examples/reactivity/reactive-dep.html
@@ -0,0 +1,29 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Document</title>
+    <script src="../../dist/vue.js"></script>
+</head>
+<body>
+<div id="app">
+    <p id="p1"></p>
+    <p id="p2"></p>
+</div>
+</body>
+<script>
+    const { reactive,effect } = Vue
+    const obj=reactive({
+        name:'张三'
+    })
+    effect(()=>{
+        document.querySelector('#p1').innerText=obj.name
+    })
+    effect(()=>{
+        document.querySelector('#p2').innerText=obj.name
+    })
+    setTimeout(()=>{
+        obj.name='李四'
+    },2000)
+</script>
+</html>