vue3采用proty实现响应式数据，下面的实现 1.当副作用函数effect执行时，会触发字段obj.text的读取操作，当修改obj.text的值时，会触发字段obj.text的设置操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>响应式系统的设计与实现</title>
</head>
<body>
<script>
// 存储副作用函数的桶
const bucket = new Set();
// 原始数据
const data = {
text: "你好,我是周杰伦",
};
// 对原始数据的代理
const obj = new Proxy(data, {
// 拦截读取的操作
get(target, key) {
console.log("@", target, key, target[key]);
// 将副作用的函数effct 添加到存储副作用函数的桶中
bucket.add(effect);
//返回属性值
return target[key];
},
// 拦截设置操作
set(target, key, newVal) {
console.log("newVal", newVal);
// 设置属性值,更新原始数据
target[key] = newVal;
// 把辅作用函数从桶里取出并执行
bucket.forEach((fn) => {
fn();
});
//返回true代表设置操作成功
return true;
},
});
function effect() {
document.body.innerText = obj.text;
}
// 执行副作用函数，触发读取
effect();
//1秒后修改响应式数据
setTimeout(() => {
obj.text = "我是vue3";
}, 1000);
</script>
</body>
</html>
