【Vue】轻松理解数据代理

即兴小索奇

已于 2023-09-22 22:11:42 修改

阅读量283

点赞数 2

分类专栏： java Vue 计算机文章标签： vue.js 前端 javascript

于 2023-09-20 21:12:04 首次发布

本文链接：https://blog.csdn.net/m0_64880608/article/details/133101477

版权

java 同时被 3 个专栏收录

130 篇文章 1 订阅

订阅专栏

计算机

53 篇文章 0 订阅

订阅专栏

Vue

42 篇文章 0 订阅

订阅专栏

hello，我是小索奇，精心制作的Vue教程持续更新哈，想要学习&巩固&避坑就一起学习叭~

Object定义配置方法

代码

引出数据代理，先上代码，后加解释

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>回顾Object.defineproperty方法</title>
 </head>
 <body>
  <script type="text/JS" >
   let number = 18
   let person = {
    name:'张三',
    sex:'男', 
   }
// 它的功能是给person配置一个age属性
   Object.defineProperty(person,'age',{
    // value:18, 
    // enumerable:true, //控制属性是否可以枚举，默认值是false,f12可以看到颜色为浅色，用Object.keys(person)获取不到age的key（不可枚举）
    // writable:true, //控制属性是否可以被修改，默认值是false
    // configurable:true //控制属性是否可以被删除，默认值是false

    //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
    //get:function(){}=
    get(){
    // 如果不这样关联，number值不变，从上往下执行完结束，是修改不了的必须关联
     console.log('有人读取age属性了')
     return number
    },

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

   })

   // console.log(Object.keys(person))

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

image-20230812002421058

writable:false 默认false时不可以修改

image-20230812003530814

writable：true

image-20230812003444218

直接写进对象中是可以随意修改删除的，但加了配置项就不是随意了，想要修改删除需要配置

当加入getter时，定义的属性就会随着修改而变化，属性通过调用属性get而控制-invoke property getter

image-20230812004517285

数据代理

通过一个对象代理对另外一个对象中属性进行修改操作

代码实现

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>何为数据代理</title>
 </head>
 <body>
  <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
  <script type="text/JS" >
   let obj = {x:100}
   let obj2 = {y:200}

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