defineProperty和Proxy的区别

1.proxy 的用法，defineProperty 的用法

const myProxy = new Proxy(target, handle)
// target: 使用proxy包装的目标对象
// handle: 用来制定拦截行为

Object.defineProperty(obj, prop, descriptor)
// obj：  必需。目标对象 
// prop： 必需。需定义或修改的属性的名字
// descriptor：  必需。目标属性所拥有的特性   (writable：可重写  enumerable：可枚举  configurable：可修改)

let obj = {
    name: "小彭",
    age: 22,
    like:["basketball", "music"],
    intro:{
        lang: "js",
    }
}

const myProxy = new Proxy(obj, {
    get(target, key){
        console.log("target", target)
        console.log("key", key)
        return target[key]
    }
    set(target, property, value) {
        target[property] = value
        return true      // 标识设置成功
    }
})

// defineProperty 不能监听属性的添加和删除
let myObj = Object.defineProperty(obj, 'sex', {} )
myObj.sex = "男"
console.log(obj.sex)   // undefined

// proxy 能够监听对象的属性添加和删除
myProxy.intro.lang = "javascript"
console.log(obj.intro.lang) // javascript
obj.sex = "男"
console.log(myProxy.sex)    // 男

2.proxy 和 defineProperty 的区别

1. definedProperty 是劫持对象的属性，不能监听属性的添加和删除，新增元素需要再次 definedProperty
2. Proxy 劫持的是整个对象，不需要做特殊处理
3. 使用 defineProperty 时，我们修改原来的 obj 对象就可以触发拦截，而使用 Proxy，就必须修改代理对象，即 Proxy 的实例才可以触发拦截
4. 使用 defineProperty 需要遍历对象的每一个属性，对于性能会有一定的影响
5. Proxy 可以对数组基于下标的修改的检测，长度修改的监测，而且对 Map、Set、WeakMap 和 WeakSet 的支持