Proxy 基本使用

回顾 Object.defineProperty 缺点

• 深度监听，需要递归到底，一次性计算量大
• 无法监听新增属性/删除属性（Vue.set Vue.delete）
• 无法原生监听数组，需要特殊处理

Proxy 基本使用

// const data = {
//     name: 'zhangsan',
//     age: 20
// }
const data = ['a', 'b', 'c']
const proxyData = new Proxy(data, {
    get(target, key, receiver) {
        // 改进
        // 只处理本身（非原型的）属性
        const ownKeys = Reflect.ownKeys(target)
        if (ownKeys.includes(key)) {
            console.log('get', key) // 监听
        }
        const result = Reflect.get(target, key, receiver)
        return result // 返回结果
    },
    set(target, key, val, receiver) {
        // 改进
        // 重复的数据，不处理
        if (val === target[key]) {
            return true
        }
        const result = Reflect.set(target, key, val, receiver)
        console.log('set', key, val)
        console.log('result', result)
        return result // 是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        console.log('result', result)
        return result // 是否删除成功
    }
})
// proxyData.age
// // get age
//
// proxyData.age = 30
// // set age 30
// // result true
//
// delete proxyData.age
// // delete property age
// // result true
// proxyData.push('d')
// get push
// get length
// set 3 d
// result true
// set length 4
// result true
// 改进后
proxyData.push('d')
// get length
// set 3 d
// result true

Reflect 作用

• 和 Proxy 能力一一对应
• 规范化，标准化，函数化
• 替代掉 Object 上的工具函数

const obj = {a: 100, b: 200}
// 判断 a 在 obj 中的方法
console.log('a' in obj) // true
// 看起来更舒服
console.log(Reflect.has(obj, 'a')) // true
// 删除数据
console.log(delete obj.a) // true
console.log(Reflect.deleteProperty(obj, 'b')) // true
obj.a=300
obj.b=400
// 可以替换 Object 函数
console.log(Object.getOwnPropertyNames(obj)) // ["a", "b"]
console.log(Reflect.ownKeys(obj)) // ["a", "b"]