手写组合API-shallowReactive 和 reactive

复制代码
// shallowReactive 和 reactive
const reactiveHandler = {
    get(target, prop) {
        console.log('拦截器 get..........', prop)
        return Reflect.get(target, prop)
    },
    set(target, prop, value) {
        console.log('拦截器 set..........', prop, value)
        return Reflect.set(target, prop, value)
    },
    deleteProperty (target, prop) {
        console.log('拦截器 deleteProperty..........', prop)
        return Reflect.deleteProperty(target, prop)
    }
}
const shallowReactive = (target) => {
    if (target && typeof target === 'object') {
        return new Proxy(target, reactiveHandler)
    }
    return target
}

const reactive = (target) => {
    if (target && typeof target === 'object') {
        if (Array.isArray(target)) {
            target.forEach((item, index) => {
                target[index] = reactive(item)
            })
        } else {
            Object.keys(target).forEach(k => {
                target[k] = reactive(target[k])
            })
        }
        return new Proxy(target, reactiveHandler)
    }
    return target
}
const reactive = (target) => {
    if (target && typeof target === 'object') {
        for (let k in target) {
            if (target.hasOwnProperty(k)) {
                target[k] = reactive(target[k])
            }
        }
        return new Proxy(target, reactiveHandler)
    }
    return target
}
复制代码

 

posted @   monkey-K  阅读(24)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示