vue3.0响应式实现

vue3使用proxy实现响应式

function reactive(target = {}) {
    if (type target !== 'object' || target === null) {
        return target
    }

    const proxyConf = {
        get: function (target, key, receiver) {
            const result = Reflect.get(target, key, receiver)
            // 深度监听，对于深层的对象
            return reactive(result)
        },
        set: function (target, key, val, receiver)) {
             const result = Reflect.set(target, key, val, receiver)
            return result
        },
        deleteProperty: function (target, key) {
             const result = Reflect.deleteProperty(target, key)
            return result
        }
    }
    const observed = new Proxy(target, proxyConf)
    return  observed
}

const data = {
    name: "张三" ,
    age: "34",
    info: {
        city: "北京"
    }
}

优点：

深度监听，性能更好(调用才会深度监听)

可监听新增和删除的属性

可监听数组变化

缺点：

Proxy能规避Object.defineProperty但是无法兼容所以浏览器，无法Polyfill