数据代理-Object.defineProperty -Vue中的数据代理

我爱布朗熊

已于 2022-09-03 13:44:49 修改

阅读量347

点赞数 1

文章标签： vue.js javascript 前端

于 2022-08-28 15:56:22 首次发布

本文链接：https://blog.csdn.net/weixin_51351637/article/details/126569717

版权

一、了解Object.defineProperty

二、数据代理

1.定义

2.Vue中的数据代理

一、了解Object.defineProperty

值得一说的是，get函数和set函数不能与value、writable共同使用否则就会出现

property descriptors must not specify a value or be writable when a getter or setter has been specified

当指定了getter或setter时，属性描述符不能指定值或可写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
        </div>

        <script type="text/javascript">
           let number =18
           let person ={
               name:'张三',
               sex:'男',
           }
        //  给哪个对象添加参数，添加的参数叫什么名，第三个参数是配资项，可以写很多的配置
            Object.defineProperty(person,'age',{
                // value:18,
                // 但是我们这样添加的元素无法进行枚举或者遍历
                // 为了我们新添加的age元素可以添加遍历，我们还需要一个配置
                enumerable:true,

                //除此之外，我们新添加的age属性在页面上无法修改，为了在页面上也可以修改，我们需要再进行配置
                // writable:true,

                configurable:true ,  //控制属性可以被删除

                //当有人读取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(Object.keys(person))
        </script>   
    </body>
</html>

二、数据代理

1.定义

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

下面这个小案例就是通过obj2来操作obj

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
        </div>

        <script type="text/javascript">
           let obj= { x:100 } 
           let obj2={ y:200 }
              
       
           Object.defineProperty(obj2,'x',{
             //当有人想获取obj2中的x属性时，我们把obj的y属性给他
              get(){
                return obj.x
              },
             
            // setter被调用时说明有人想修改obj2的x
            //  当有人想修改obj2中x属性时，我们把obj中的x属性值给改掉就可以了
               set(value){
                obj.x=value
               }

           })

        </script>   
    </body>
</html>

2.Vue中的数据代理

Vue中数据代理：

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

Vue中数据代理的好处：

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

基本原理：

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

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

在getter/setter内部去操作（读或写）data中对应的属性

假设我们没有数据代理，我们在使用插值语句的时候使用了_data.xxxx这样就增加了代码量，也非常的不方便，故我们使用了上面的数据代理

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title> 初识vue</title>
        <!--引入vue    引入之后，全局就多了一个vue这个构造函数-->
        <script type="text/javascript" src="../js/vue.js"></script> 
    </head>
    <body>
        <div id="root">
            <h1> {{_data.name}}</h1>
            <h1> {{_data.address}}</h1>
        </div>

        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false 

            new Vue({
                el:'#root',
                data:{
                    name:'尚硅谷',
                    address:'洪福科技园'
                }
            })
        </script>   
    </body>
</html>

因为vue中做了数据代理，我们可以直接使用下面的第二种写法，第一种写法比较麻烦

我爱布朗熊

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
数据代理-Object.defineProperty -Vue中的数据代理

值得一说的是，get函数和set函数不能与value、writable共同使用否则就会出现property descriptors must not specify a value or be writable when a getter or setter has been specified当指定了getter或setter时，属性描述符不能指定值或可写二、数据代理 1.定义数据代理：通过一个对象代理对另一个对象中属性的操作（读或写）下面这个小案例就是通过obj2来操作ob
复制链接

扫一扫