Vue教学3-优快云博客

本文详细介绍了JavaScript中`Object.defineProperty`方法及其高级用法（get()和set()），探讨了数据代理的概念，并展示了如何在Vue中使用数据代理实现对象属性的读写操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、数据代理

1.回顾Object.defineProperty方法

(1)Object. defineProperty基本属性

<script type="text/javascript">
    let person = {
        name: "张三",
        sex: "男"
    }
    // Object.defineProperty() 第一个参数指定在哪个变量里添加对象
    //                         第二个参数是要添加的key的名称
    //                         第三个参数是要添加的配置对象
    Object.defineProperty(person, "age", {
        value: 19
    })
    console.log(person)
</script>

<script type="text/javascript">
    let person = {
        name: "张三",
        sex: "男"
    }
    Object.defineProperty(person, "age", {
        value: 19,
    })
    // 遍历这个person
    console.log(Object.keys(person))
</script>

<script type="text/javascript">
    let person = {
        name: "张三",
        sex: "男"
    }
    Object.defineProperty(person, "age", {
        value: 19,
        enumerable: true  //让该对象可以被枚举出来，默认false
    })
    console.log(Object.keys(person))
</script>

<script type="text/javascript">
    let person = {
        name: "张三",
        sex: "男"
    }
    Object.defineProperty(person, "age", {
        value: 19,
        enumerable: true,
        writable:true          // 让该对象可以被修改，默认false
        configurable:true      // 让该对象可以被删除，默认false    
    })
    console.log(Object.keys(person))
</script>

(2)高级属性 get() 和 set(value)

<script type="text/javascript">
    let number = 19
    let person = {
        name: "张三",
        sex: "男",
        age:number
    }
    console.log(person)
</script>

<script type="text/javascript">
    let number = 19
    let person = {
        name: "张三",
        sex: "男",
    }
    Object.defineProperty(person, "age", {
        // 当有人读取了person的age值时，get函数（getter）就会被调用，且返回值就是age的值
        get(){
            return number
        }
    })
    console.log(person)
</script>

那修改person里的age对象时number也会改变呢，这下就要用set(value)函数了

<script type="text/javascript">
    let number = 19
    let person = {
        name: "张三",
        sex: "男",
    }
    Object.defineProperty(person, "age", {
        get() {
            return number
        },
        // 当有人修改person里的age属性时，set()函数(setter)就会被调用，且会收到修改的具体值
        set(value) {
            number = value
        }
    })
    // console.log(Object.keys(person))
    console.log(person)
</script>

2.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<script type="text/javascript">
    let obj = {x:100}
    let obj2 = {y:200}

    Object.defineProperty(obj2, "x", {
        get(){
            return obj.x
        },
        set(value){
            obj.x = value
        }
    })
    console.log(obj2)
</script>