响应式源码实现

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>