vue3学习之Proxy实现原理

废话不多少 写一个html

源码用到了映射Reflect window上新增的一个映射属性，和object一样，具体mdn可以详细了解。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <script>
        let person = {
            name: '张三',
            age: 18
        }
        let p = new Proxy(person, {
            // 这些都不写  prox也能改person的增删改查
            // 为什么要写  因为我们想要捕获到他  我们想要做响应式
            get(target, propName) {
                console.log('有人读取了，我要去更新了', target, propName)
                return target[propName] //在修改源数据person
                // Reflect  window的一个方法  映射，同object
                // 可替换为
                return Reflect.get(target, propName)
            },
            // 新增或者修改的时候  会多穿一个value属性
            set(target, propName, value) {
                console.log('有人修改或者新增了，我要去更新了', target, propName)
                return target[propName] = value//在修改源数据person
                // 同上
                return Reflect.set(target, propName, value)
            },
            // 删除 vue3 新提供了一个deleteProperty
            deleteProperty(target, propName) {
                console.log('有人删除了了，我要去更新了', target, propName)
                return delete target[propName]//在修改源数据person
                // 同上
                return Reflect.defineProperty(target, propName)
            },
        })
    </script>
</body>

</html>
posted @ 2022-02-11 10:43  爱喝可乐的靓仔  阅读(531)  评论(0)  编辑  收藏  举报