-
Notifications
You must be signed in to change notification settings - Fork 0
/
4_3_1proxy.html
69 lines (61 loc) · 1.73 KB
/
4_3_1proxy.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件保存</title>
</head>
<body>
<div id="app"></div>
<div style="font-size: 14px; position:absolute;bottom:20px; left:10px;">
源代码地址:https://gitee.com/xiao_yan_bin/vue_code<br/>
github: https://github.com/xiaoyanbin/vue_code<br/>
vue设计与实现,持续更新,建议点赞收藏,有问题可以在评论区留言
</div>
</body>
<script lang="ts">
// 创建一个收集副作用的容器
const bucket = new Set()
// 保存当前要执行的副作用函数
let activeEffect = null
const data = {text: 'hello world'}
// 1.创建一个响应式对象
const obj = new Proxy(data, {
get(target, key){
console.log('get', key)
// bucket中添加副作用函数
if(activeEffect){
bucket.add(activeEffect)
}
return Reflect.get(target, key)
},
set(target, key, value){
console.log('set', key, value)
Reflect.set(target, key, value)
// 执行副作用函数
bucket.forEach(fn => fn())
return true
}
})
// 副作用函数
function effect(fn){
// 当调用effect的时候,我们需要把fn放到bucket中
activeEffect = fn
fn()
}
// effect 传入一个回调函数,响应系统不依赖副作用函数的名称
effect(() =>{
document.getElementById('app').innerHTML = obj.text
})
console.log('读取的值:'+obj.text)
// 赋值的时候是先get再set
obj.text = 'hello world第二次'
//
setTimeout(() => {
obj.text = 'hello vue第三次'
}, 1000)
// 1.基本的实现和工作原理
// 2.副作用函数不能使用硬编码
// 3.我们希望传入一个函数,然后在函数中执行副作用函数
</script>
</html>