day56- 数据代理

数据代理

通过一个对象代理对另一个对象中属性的读或写操作

object方法

 <body>
 
     <script type="text/javascript">
         let number =18
         let person ={
             name:'gugu',
             sex:'man',
         }
 
         Object.defineProperty(person,'age',{
         //     value:18,
         // //    不能枚举，不能遍历
         //     enumerable:true,
         // //    控制属性是否可以枚举，默认为false
         //     writable:true,
         // //    控制属性是否可以修改，默认为false
         //     configurable:true
         // //    控制属性是否可以删除，默认为false
 
 
         //    当有人读取person的age属性时，get函数被调用，返回值是age的值
             get:function () {
                 return number
             },
         //    当有人修改person的age属性时，set函数被调用，返回值是age的值
             set(value){
                 console.log('change :', value )
                 number = value
             }
         })
         console.log(person)
 
     </script>
 </body>

vue中的数据代理

 <!--
     1.vue中的数据代理：
         通过vm对象来代理data对象中的属性的操作（读或写）
     2.vue中数据代理的好处
         更加方便的操作vue中data中的数据
     3.基本原理
         通过Object.defineProperty（）把data中对象所有的属性添加到vm上
         为每一个添加到vm上的属性，都指定一个getter和setter
         在getter和setter中去操作data中对应的属性
 -->

<body>
 <div id="root">
 
     <h2>名字：{{name}}</h2>
     <h2>地址；{{address}}</h2>
 
 </div>
 
 </body>
 <script>
     const vm = new Vue({
         el:'#root',
         data:{
             name:'gugu',
             address:'henan'
         }
     })
 
 </script>