3.Vue中的数据代理

最新推荐文章于 2024-07-17 00:50:14 发布

爱打羽毛球的程序员

最新推荐文章于 2024-07-17 00:50:14 发布

阅读量286

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_46637351/article/details/125775214

版权

Web前端知识专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.Vue中的数据代理:

通过vm对象来代理data对象中的属性操作（读/写）

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过Object.defineProperty()把data对象中所有属性添加到vm上

为每一个添加到vm上的属性,都指定一个getter/setter

在getter/setter内部操作(读/写data)中对应的属性

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

具体程序

<body>
    <div id="root">

    </div>
    <script>
        Vue.config.productionTip = false
        let number = 18
        let person = {
            name: 'fxy',
            sex: 'man',
        }
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true, //控制属性是否可以被枚举，默认值是false
            // writable: true,   //控制属性是否可以被修改，默认值是false
            // configurable: true,//控制属性是否可以被删除，默认值是false 

            get() {
                return number
            },
            set(value) {
                number = value
            }
        })
        console.log(person)
    </script>
</body>