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

    目录

    一、了解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时，属性描述符不能指定值或可写

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.         div>
    12.  
    13.         <script type="text/javascript">
    14.            let number =18
    15.            let person ={
    16.                name:'张三',
    17.                sex:'男',
    18.            }
    19.         //  给哪个对象添加参数，添加的参数叫什么名，第三个参数是配资项，可以写很多的配置
    20.             Object.defineProperty(person,'age',{
    21.                 // value:18,
    22.                 // 但是我们这样添加的元素无法进行枚举或者遍历
    23.                 // 为了我们新添加的age元素可以添加遍历，我们还需要一个配置
    24.                 enumerable:true,
    25.  
    26.                 //除此之外，我们新添加的age属性在页面上无法修改，为了在页面上也可以修改，我们需要再进行配置
    27.                 // writable:true,
    28.  
    29.                 configurable:true ,  //控制属性可以被删除
    30.  
    31.                 //当有人读取person的age属性时，get函数或者说getter就会被调用，且返回值就是age的值
    32.                 get:function(){
    33.                     console.log('有人读取了age属性')
    34.                      return number
    35.                 },
    36.                 // 当有人修改person的age属性时，set函数或者说setter就会被调用，且会受到具体的值
    37.                 set(value){
    38.                     console.log('有人修改了age属性时，且值是',value)
    39.                     number=value
    40.                 }
    41.             })
    42.  
    43.             console.log(Object.keys(person))
    44.         script>   
    45.     body>
    46. html>
    47.

    二、数据代理

       1.定义

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

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.         div>
    12.  
    13.         <script type="text/javascript">
    14.            let obj= { x:100 } 
    15.            let obj2={ y:200 }
    16.               
    17.        
    18.            Object.defineProperty(obj2,'x',{
    19.              //当有人想获取obj2中的x属性时，我们把obj的y属性给他
    20.               get(){
    21.                 return obj.x
    22.               },
    23.              
    24.             // setter被调用时说明有人想修改obj2的x
    25.             //  当有人想修改obj2中x属性时，我们把obj中的x属性值给改掉就可以了
    26.                set(value){
    27.                 obj.x=value
    28.                }
    29.  
    30.            })
    31.  
    32.         script>   
    33.     body>
    34. html>
    35.

    2.Vue中的数据代理

       Vue中数据代理：

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

       Vue中数据代理的好处：

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

       基本原理：

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

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

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

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

    1. html>
    2. <html>
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <title> 初识vuetitle>
    6.         
    7.         <script type="text/javascript" src="../js/vue.js">script> 
    8.     head>
    9.     <body>
    10.         <div id="root">
    11.             <h1> {{_data.name}}h1>
    12.             <h1> {{_data.address}}h1>
    13.         div>
    14.  
    15.         <script type="text/javascript">
    16.             //阻止vue在启动时生成生产提示
    17.             Vue.config.productionTip=false 
    18.  
    19.             new Vue({
    20.                 el:'#root',
    21.                 data:{
    22.                     name:'尚硅谷',
    23.                     address:'洪福科技园'
    24.                 }
    25.             })
    26.         script>   
    27.     body>
    28. html>

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

  • 相关阅读:
    公网集群对讲+GPS可视追踪｜助力物流行业智能化管理调度
    【搞定k8s】k8s轻松部署Dashboard管理集群
    Keras深度学习实战（11）——可视化神经网络中间层输出
    Elasticsearch的倒排索引是什么？
    【6 进程间通信】
    老陈打码老陈打码
    nodejs+vue+elementui高校体育馆场地预订系统
    Apache Shiro 认证绕过漏洞（CVE-2020-1957 ）漏洞复现
    Java String类
    Git获取本地仓库及基本操作指令
  • 原文地址：https://blog.csdn.net/weixin_51351637/article/details/126569717