一、proxy简介
proxy是ES6提供的一个操作对象的API,通过创建一个对象代理来拦截和自定义对象的各种基本操作。
二、使用proxy实现一个基本的响应式数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>proxy使用</title>
</head>
<body>
<button id="updateButton">点击+1</button>
<div id="message"></div>
<script>
// 创建一个对象
const obj = {
counter: 0,
};
// 使用Proxy创建响应式数据
const number = new Proxy(obj, {
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
updateNum(); // 更新显示的计数器值
return true;
},
});
// 初始化显示
const updateNum = () => {
document.getElementById("message").innerText = number.counter;
};
// 绑定按钮点击事件
document.getElementById("updateButton").addEventListener("click", () => {
number.counter++; // 点击按钮时计数器加一
});
// 初始化显示
updateDisplay();
</script>
</body>
</html>
三、使用proxy实现一个基础的ref()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>基础 ref()</title>
</head>
<body>
<button id="updateButton">点击+1</button>
<div id="message"></div>
<script>
const createRef = (initialValue) => {
return new Proxy(
{ value: initialValue },
{
get(target, key) {
return target[key];
},
set(target, key, value) {
target[key] = value;
if (key === "value") {
updateDisplay(); // 当.value被设置时,更新DOM
}
return true;
},
}
);
};
// 初始化ref
const numberRef = createRef(0);
// 更新DOM的函数
const updateDisplay = () => {
document.getElementById("message").innerText = numberRef.value;
};
// 绑定按钮点击事件
document.getElementById("updateButton").addEventListener("click", () => {
numberRef.value++; // 点击按钮时计数器加一
});
// 初始显示
updateDisplay();
</script>
</body>
</html>