dj
668ecda610
- 将依赖管理逻辑分离到独立的dep模块 - 创建Dep类型定义和createDep工厂函数 - 修改KeyToDepMap类型以使用Dep集合替代单个ReactiveEffect - 添加trackEffects函数用于统一跟踪依赖 - 实现triggerEffects函数用于批量触发依赖 - 增加triggerEffect函数用于触发单个依赖 - 在effect运行时添加注释说明首次getter触发 - 添加HTML示例文件验证多依赖收集功能
29 lines
620 B
HTML
29 lines
620 B
HTML
<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> |