Vue_6:数据代理

最新推荐文章于 2024-08-04 21:39:31 发布

易辰不呆

最新推荐文章于 2024-08-04 21:39:31 发布

阅读量54

点赞数

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

本文链接：https://blog.csdn.net/wcj28738/article/details/120902362

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

回顾Object.defineProperty方法

<body>
    <script type="text/javascript">
        let number=18
        let person = {
            name:'张三',
            sex:'男',
            age:18
        }
    
       
        object.defineProperty(person,'age',{
            value:18
            enumerable:true,//控制属性是否可以枚举,默认值是false
            writeable:true,//控制属性是否可以被修改,默认值是false
            configurable:true//控制属性是否可以被删除,默认值是false

            //当有人读取person的age属性时,get函数(getter)就会被调用,且返回值是age的值
            get(){
                console.log('有人读取了age属性了')
                return number
            }
            //当有人读取person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性,且值是',value)
                number = value
            }
        })
        //这种方法定义的age属性不能被枚举(也就是说不能被遍历)
        console.log(person)
        
    </scritpt>
</body>

什么是数据代理

<body>
    <!-- 数据代理:通过一个对象代理对另一个对象中的属性的操作(读/写)-->
    <script type="text/javascript">
        let obj1 = {x:100}
        let obj2 = {y:200}

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

</body>

1.Vue中的数据代理:通过vm对象代理data对象中属性的操作(读/写)

2.Vue中的数据代理的好处:更加方便地操作data中的数据

3.基本原理:

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

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

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

易辰不呆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue_6:数据代理

回顾Object.defineProperty方法<body> <script type="text/javascript"> let number=18 let person = { name:'张三', sex:'男', age:18 } object.defineProperty(person,'age.
复制链接

扫一扫