vue3响应式原理(Proxy代理对象)

最新推荐文章于 2024-09-06 09:27:11 发布

幺叭伍

最新推荐文章于 2024-09-06 09:27:11 发布

阅读量622

点赞数

分类专栏： vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_50422141/article/details/124726141

版权

vue3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

<body>
    <div>vue3响应式原理(Proxy代理对象)</div>
    <script>
        let person = {
            name: '张三',
            age: 18
        }
        let p = new Proxy(person, {
            get(terage, propName) {
                console.log("读取");
                return Reflect.get(terage, propName)
            },
            set(terage, propName, value) {
                console.log("更新成功");
                return Reflect.set(terage, propName, value)
            },
            deleteProperty(terage, propName) {
                console.log("删除成功");
                return Reflect.deleteProperty(terage, propName)
            }
        })
        console.log(p.name);  // 读取
        p.name = "李四"       // 修改
        p.sex = "男"          // 新增
        delete p.sex          // 删除
        console.log(person, p);
    </script>
</body>

</html>