3.Vue3.0里为什么要用 Proxy API 替代 defineProperty API ？

本文链接：https://blog.youkuaiyun.com/qq_43299703/article/details/121213400

Vue3.0使用Proxy替代defineProperty的原因在于Proxy能全局监听对象变化，解决defineProperty无法检测属性添加删除、数组方法监听不足以及深层嵌套性能问题。虽然defineProperty需要手动遍历和处理，而Proxy提供了更全面的拦截操作，包括数组变化监听。然而，Proxy不兼容IE，Vue3因此需要其他辅助方法确保兼容性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Object.defineProperty

定义：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

为什么能实现响应式

通过defineProperty 两个属性，get及set

属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的this并不一定是定义该属性的对象）。该函数的返回值会被用作属性的值

属性的 setter 函数，当属性值被修改时，会调用此函数。该方法接受一个参数（也就是被赋予的新值），会传入赋值时的 this 对象。默认为 undefined

下面通过代码展示：

定义一个响应式函数defineReactive

function update() {
    app.innerText = obj.foo
}

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

调用defineReactive，数据发生变化触发update方法，实现数据响应式

const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
    obj.foo = new Date().toLocaleTimeString()
},1000)

在对象存在多个key情况下，需要进行遍历

function obs