Proxy实现响应式对象

原创已于 2022-02-23 15:08:26 修改 · 735 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #es6

于 2022-02-23 15:07:55 首次发布

本文介绍了如何使用JavaScript的Proxy对象将普通对象转换为响应式对象，通过get、set和deleteProperty方法实现实时数据监听和修改。通过实例演示了如何创建代理对象，观察属性变化并进行相应操作。

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>