Vue中的数据代理

frontEndSmallWhite

已于 2022-07-09 11:56:13 修改

阅读量240

点赞数

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

于 2022-07-09 07:00:44 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46376652/article/details/125688745

版权

vue 专栏收录该内容

28 篇文章

订阅专栏

本文介绍了Vue中数据代理的概念，通过一个对象代理另一个对象的改变。详细讲解了Object.defineProperty()方法，包括其参数作用，如value、enumerable、writable和configurable属性。并阐述如何使用get和set方法实现数据代理，以及Vue框架如何利用getter和setter实现对data对象的便捷操作。

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

一、数据代理：

通过一个对象，代理对另一个对象的改变

<script>
        let obj = {name:"lijia"};
        let obj2={address:"华师"}
        Object.defineProperty(obj2,"name",{ //给obj2对象新增一个name属性
            get(){ 
                return obj.name //当获取obj2对象的name属性时，返回obj的name属性
            },
            set(value){ 
                obj.name=value //当设置obj2对象的name属性时，修改obj的name属性
            }
        }) //这就实现了obj2对obj的数据代理
</script>

二、Object.defineproperty()方法

接收三个参数：操作的对象名、添加的属性名(key)、添加的属性值对象

1、添加的属性值对象中的可设置属性

（1）、value

属性的数值

（2）、enumerable

是否能够枚举(遍历)，默认为false，添加的属性不可以遍历；改为true就能够实现遍历

（3）、writable

是否能够被修改，默认为false

（4）、configurable

控制属性是否能够被删除，默认为false

2、实现数据代理

通过设置第三个参数对象中添加get和set方法实现

get:function(){ }：当获取数据时，调用该方法，可简写为get(){ }

set:function(value){ }：当修改数据时，调用该方法，可简写为set(value){ }

<script>
        let numb=18 //当修改numb的值，使用get的话，能够实时更新age的值
    
        let person={
            name:'李四',
            address:'华师',
        }
        Object.defineProperty(person,'age',{
            value:18,
            enumerable:true, //控制属性是否可以枚举，默认为false
            writable:true, //控制属性是否可以被修改，默认值为false
            configurable:true //控制属性是否可以被删除，默认值为false

            //当有人调用age属性时，get(getter)属性就会被调用，且返回值是age的值
            get(){
                console.log("有人读取age属性了")
                return numb
            },

            //当有人修改age属性时，set(setter)属性就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age的值，且值是',value)
                numb = value
            }
        })
</script>