<!DOCTYPE html>
<html lang="en">
<body>
<script>
let obj = {
name: 'aa',
age: 14,
n: {
num: 1,
},
}
function definereactive(target, key, value) {
observer(value)
Object.defineProperty(target, key, {
get() {
// 记录对应的渲染watcher
return value
},
set(newValue) {
// 让记录的watcher重新执行一下
if (value !== newValue) {
value = newValue
observer(newValue)
}
},
})
}
function observer(data) {
if (typeof data !== 'object' || typeof data === null) {
return data
}
for (let key in data) {
definereactive(data, key, data[key])
}
}
observer(obj)
</script>
</body>
</html>```
vue 3:
```js
let obj = {
name: 'aa',
age: 12,
n: {
num: 2,
},
}
let handler = {
get(target, key) {
// 收集effect
let temp = target[key]
if (typeof temp === 'object') {
return new Proxy(temp, handler)
}
return temp
},
set(target, key, value) {
// 触发effect的更新
target[key] = value
},
}
function reactive(target) {
return new Proxy(target, handler)
}
const proxy = reactive(obj)
proxy.name = 100
