数据驱动视图：深度监听data变化

深度监听数据变化，是数据驱动视图前端框架的基石之一。Vue3中使用Proxy来实现响应式，而Vue2中使用Object.defineProperty

• Proxy
• Object.defineProperty

Proxy的使用方法

const proxiedData = new Proxy(data, {
    get(target, key, receiver) {
        const result = Reflect.get(target, key, receiver)
        console.log('get', key)
        return result; // 返回设置结果
    },
    set(target, key, val, receiver) {
        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        return result;
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        return result;
    }
})

顾名思义proxy的三个方法就是获取，设置，删除，而set方法比defineProperty好的地方在于能够监听到新增的属性，不用额外再写逻辑，原生支持就是爽~
其中Reflect的操作可以就认为是对象操作的函数式写法，比原先的delete target.key或者ta