【备战春招】第7天 6-15 Proxy 基本使用

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：6-15 Proxy 基本使用

课程讲师： 双越

课程内容：

6-15 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) // true
        return result // 是否设置成功
    },
    deleteProperty(target, key) {
        const result = Reflect.deleteProperty(target, key)
        console.log('delete property', key)
        // console.log('result', result) // true
        return result // 是否删除成功
    }
})

谢谢老师，讲的非常细致，很容易懂。这一节学的是Proxy 基本使用，为以后的学习打下了基础。
原来vue3能有这么多种性质，以及对vue3有了新的认识，期待后边的学习