响应式源码实现
reactive
vue
1234567891011121314
<script setup lang="ts">
const reactive = <T extends object>(target: T) => {
return new Proxy(target, {
get(target, key, receiver){//tarftet:目标对象 key:属性名 receiver:代理对象本身
//返回目标对象的属性值,使用反射 API 执行原始的属性写入操作,行为与直接赋值类似,使用Reflect可以避免上下文错乱的问题
return Reflect.get(target, key, receiver)
},
set(target, key, value, receiver){
//设置目标对象的属性值
return Reflect.set(target, key, value, receiver)
}
})
}
</script>