Vue--实现数据代理

最新推荐文章于 2024-08-24 20:28:43 发布

南风Candy

最新推荐文章于 2024-08-24 20:28:43 发布

阅读量571

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/Robi_Candy/article/details/121670309

版权

本文介绍了JavaScript中的数据代理概念，通过Object.defineProperty()方法实现对象属性的读取和修改操作。示例展示了如何创建一个代理对象，当访问或修改'x'属性时，会触发特定的get和set函数，从而实现对原对象属性的控制。

摘要由CSDN通过智能技术生成

数据代理的含义

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">   
    <title>何为数据代理</title>
   
</head>

<body>
    <!-- 数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写） -->
 <script type="text/javascript">
  
   let obj = {x:100} // {x:100}--将括号当成一个对象，x--属性名  100--属性值
   let obj2 = {y:200}

   Object.defineProperty(obj2,'x',{
       // 提供get函数
       get(){
           console.log('读取x的值了');
           return obj.x
       },
       // 提供set函数
       set(value){
        console.log('有人修改x的属性值了,且值是',value);
        obj.x = value
       }
   })
 </script>


   
</body>
</html>