vue数据代理

最新推荐文章于 2024-06-15 14:41:39 发布

Ciao。

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量91

点赞数

分类专栏： vue2学习文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Alive_m/article/details/126336576

版权

vue2学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

数据代理：defineProperty

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

（1）语法：Object.defineProperty(obj,property,descriptor)

参数一：obj
绑定属性的目标对象
参数二：property
绑定的属性名
参数三：descriptor
属性描述（配置），且此参数本身为一个对象

（2）属性值：

属性值1：value
设置属性默认值
属性值2：writable
设置属性是否能够修改
属性值3：enumerable
设置属性是否可以枚举，即是否允许遍历
属性值4：configurable
设置属性是否可以删除或编辑
属性值5：get
获取属性的值
属性值6：set
设置属性的值

1.通过enumerable设置属性值是否允许遍历

控制属性是否可以枚举（是否可以遍历），默认值是false

2.通过configurable设置属性是否可删

控制属性是否可以被删除，默认值是false

3.通过writable设置是否可写/修改

控制属性是否可以被修改，默认值是false

4.通过value设置属性值

由于Object.defineProperty可以给对象定义属性，我们通过value，可以动态地将obj对象的属性动态地添加给target中。

for (let key in obj){
    Object.defineProperty(target,key,{
        value: obj[key]
    })
}
console.log(target);

请添加图片描述

5.通过get方法获取属性的值

当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值

【注意!】当设置get方法时，不能有value和writable方法，否则会报错

注意：get方法只有在获取指定属性值的时候，才会触发，即调用get下的匿名函数

6.通过set方法设置属性的值

set方法的值也是一个函数定义时会自动注入一个参数，此参数会设置属性的值

当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值

【注意】get方法只有在获取指定属性值的时候，才会触发，即调用get下的匿名函数

原理图：
请添加图片描述

完整案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据代理----回顾object.defineProperty方法</title>
    <!--    引入vue-->
    <script type="text/javascript" src="/excise/src/vue2.0/daima/js/vue.js"></script>
</head>
<body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止vue在启动时生成提示

    let number=20
    let person = {
        name: "章子",
        sex: "男"
    }
    Object.defineProperty(person, 'age', {
        /* value: 18,
        *enumerable: true,//控制属性是否可以枚举（是否可以遍历），默认值是false
         writable:true,//控制属性是否可以被修改，默认值是false
         configurable:true,//控制属性是否可以被删除，默认值是false
 */
        //当有人读取person的age属性时，get函数（getter）就会被调用，且返回值就是age的值
        get:function(){
            console.log('读取了age属性')
           return number
        },

        //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
        set(value) {
            console.log('修改了age属性，且值是',value)
            number=value
        }
    })

    console.log(person)
</script>
</body>
</html>