响应式对象实战：Proxy实现动态监控与操作-优快云博客

本文链接：https://blog.youkuaiyun.com/wsqzero0/article/details/123090538

Proxy实现响应式对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script type="text/javascript">
        const user = {
            name: "小米",
            age: 20,
            wife: {
                name: '小红',
                age: 18
            }
        }
        // 把目标对象变成响应式对象
        // 参数1： user---->target 目标对象
        // 参数2： handler ---->处理器对象，用来监视数据，及数据的变化
        let proxyUser = new Proxy(user, {
            get: function (target, prop) {
                console.log(target, prop)
                console.log('get调用了')
                return Reflect.get(target, prop)
            },
            set: function (target, prop, val) {
                console.log(target, prop, val)
                console.log('set调用了')
                return Reflect.set(target, prop, val)
            },
            deleteProperty: function (target, prop) {
                console.log(target, prop)
                console.log('deleteProperty调用了')
                return Reflect.deleteProperty(target,prop)
            }
        })
        // 输出目标对象的属性
        console.log(user.name)
        // 修改响应式对象
        proxyUser.name = 'sss'
        //  查看目标对象
        console.log(user)
        // 响应对象添加属性
        proxyUser.gender = "1"
        // 查看目标对象
        console.log(user)
        // 响应对象删除属性
        delete proxyUser.gender
         console.log(user)
    </script>
</body>