通过Proxy(代理): 拦截对象中任意属性的变化, 包括: 属性值的读写、属性的添加、属性的删除等。
通过Reflect(反射): 对被代理对象的属性进行操作。
其中Reflect也是ES6为了操作对象而提供的API, 为了防止直接操作对象(object, 函数), 比较之前的Object.defineProperty()等这些语言层面的替代API(个人理解)
<script>
// 源数据
let data = {
name: "张三",
age: 18,
};
// 模拟Vue3中实现响应式
const p = new Proxy(data, {
// 有人读取p的某个属性时调用
get(target, propName) {
console.log(`有人读取了p身上的${propName}属性`);
return Reflect.get(target, propName);
},
// 有人修改p的某个属性或给p追加某个属性时调用
set(target, propName, value) {
console.log(`有人修改了了p身上的${propName}属性, 我要去更新页面了`);
return Reflect.set(target, propName, value);
},
// 有人删除p的某个属性时调用
deleteProperty(target, propName) {
console.log(`有人删除了p身上的${propName}属性, 我要去更新页面了`);
return Reflect.deleteProperty(target, propName);
},
});
</script>