vue数据代理

矫情吗；* 2023-09-24 13:16 50阅读 0赞

## 前言 ##

想要学习vue的数据代理，首先需要知道Object.defineProperty方法，vue的数据劫持，数据代理，计算属性都要到了这个方法

## Object.defineProperty方法 ##

顾名思义，就是给对象定义添加属性  
首先看一段简单的代码，简单定一个person对象  
![在这里插入图片描述][05442c492e6b4e7f8596b9a2d4244be1.png]

此时我们提需求，需要给person对象新增一个age属性  
![在这里插入图片描述][657b751159a1478e888ad065842929a6.png]  
浏览器查看打印  
![在这里插入图片描述][0bd9dd213c814c4da8f29c6bbfe1e211.png]  
这种方法添加属性的方式虽然麻烦，但是也更加的高级，我们简单的验证下  
如果是直接在对象里面添加属性，发现对象的key颜色是一样的  
![在这里插入图片描述][be8e7c00c3244c0b9f2e0f0fdedf241a.png]  
![在这里插入图片描述][631a76e920aa44858eb70f91ed52668f.png]  
如果是通过方法在对象里面添加属性，发现对象的我们使用方法添加的那个key的颜色，和原有的key颜色是不一样的  
![在这里插入图片描述][aa6d2467839f49b9afd64bb982bce85a.png]  
可以看到，后来新增的属性明显颜色有点淡  
![在这里插入图片描述][4a65568af87a42b580b2487de64f5b6c.png]  
这个颜色淡说明了什么呢？

它想表达式的是，这个age(通过方法新增的属性)是可以被枚举的，也就是不参与遍历的，我们简单验证下  
我们可以使用object.keys方法循环遍历对象的全部key，最终会把对象的key放在一起形成一个数组

### defineProperty基本配置项 ###

简单修改下代码，我们首先使用第一种方式，也就是直接添加属性进行遍历key

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <script type="text/javascript">
            // 定义一个对象
            let person={
        
                name:'张三',
                sex:'男',
                age:'18'
            }
            // 给person对象新增一个age属性
            // Object.defineProperty(person,'age',{
        
            //     value:'18'
            // })
            console.log(Object.keys(person))
            console.log(person)
        </script>
    </body>
    
    </html>

![在这里插入图片描述][958440a2a5e7485983ef5452b3b1af3a.png]  
可以看到浏览器控制台三个属性全部打印了  
![在这里插入图片描述][08c1d365cb65482898630e6c31ecd938.png]  
然后修改添加属性方式，通过方法添加，可以看到只剩下两个了，最后新增的那个key没有了，这就验证了枚举是不能被遍历的  
![在这里插入图片描述][cedc7daa8b6a4d228c4ea49be136151e.png]  
![在这里插入图片描述][47f2bb1021c340868cd870e814765465.png]  
如果我非要通过方法添加属性，还要让他遍历呢？  
这时候就需要添加一个属性了

// 控制属性是否可以被枚举 默认false不允许
     enumerable:true

![在这里插入图片描述][db1e10acc8a4450a8b8b4a135c1d79e3.png]  
再来查看控制台，发现枚举key也可以被遍历了  
![在这里插入图片描述][33fb32e1c9674ff58b3a3b4099d82de0.png]  
解决了这个问题，我们继续看，如果我们直接在对象里面添加属性，那么我们可以去修改这个属性的值  
![在这里插入图片描述][87ecf05f825f4cc09aa184bc26ad34b7.png]  
![在这里插入图片描述][c95fb6ade99847bf85d6302fec71c05e.png]  
但是我们通过方法，是不能修改key的值的  
![在这里插入图片描述][673f70aa6aa6492081e8fa84d930d520.png]  
如果非要修改key的值，我们需要新增一个属性

// 控制属性是否可以被修改，默认false不允许
     writable:true

![在这里插入图片描述][5d134b66b0ba47b3b61961f40eb86da7.png]  
这时候再来修改key的值，就没问题了  
![在这里插入图片描述][c55816d1c3ac4ceebb076d5cb9b96d57.png]  
我们通过直接添加属性，可以随意修改删除属性，直接在控制台输入delete object.key  
![在这里插入图片描述][bb111d7b20384150bd84e594bdf1be66.png]![在这里插入图片描述][720f693a5a5444cb846d35f0d4209c26.png]  
如果我们使用对象删除.就不能使用这种方式随意修改删除了.删除指令直接返回false，也就是失败  
![在这里插入图片描述][39f862c1c89a496b85a5637273271984.png]  
如果想要删掉，也需要新增一个配置项

// 控制属性是否可以被删除，默认false不允许
    configurable:true

![在这里插入图片描述][e367ddf0e0bc4fb89a8885a5e476647b.png]

![在这里插入图片描述][ffc521daf7f84ae7999d82fddaa0b56d.png]  
这些属性只是列出其中几个，完整代码如下

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <script type="text/javascript">
            // 定义一个对象
            let person={
        
                name:'张三',
                sex:'男'
            }
           // 给person对象新增一个age属性
            Object.defineProperty(person,'age',{
        
                value:'18',
                // 控制属性是否可以被枚举 默认false不允许
                enumerable:true,
                // 控制属性是否可以被修改，默认false不允许
                writable:true,
                // 控制属性是否可以被删除，默认false不允许
                configurable:true
            })
     
            console.log(person)
        </script>
    </body>
    
    </html>

### defineProperty高级配置项 ###

还是上面的例子，现在有一个新的需求，我们定义一个变量number,要求它的值就是age，并且age要随着number的值变化进行动态变化

想要实现这个需求，需要借助get(getter)函数

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        <script type="text/javascript">
            // 定义一个属性，要求person的age必须要跟着这个变量进行变化
            let number=11100
            // 定义一个对象
            let person={
        
                name:'张三',
                sex:'男',
                age:number
            }
           // 给person对象新增一个age属性
            Object.defineProperty(person,'age',{
        
                // value:'18',
                // // 控制属性是否可以被枚举 默认false不允许
                // enumerable:true,
                // // 控制属性是否可以被修改，默认false不允许
                // writable:true,
                // // 控制属性是否可以被删除，默认false不允许
                // configurable:true
                
                // get函数什么时候被调用？
                // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
                get:function(){
        
                    return number
                }
            })
     
            console.log(person)
        </script>
    </body>
    
    </html>

![在这里插入图片描述][4a4421d567ac4d759367bf92dd0e236f.png]  
查看浏览器，需要点击三个点才能获取到数据  
![在这里插入图片描述][0436fceff6ca462e9da91677127ce183.png]  
如果我们想修改数据也是没问题的，会随着修改的属性值进行动态获取变化  
![在这里插入图片描述][e3d14f03bdda4ad88762df59f780fbb3.png]  
既然有get,那么就有set

当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值

![在这里插入图片描述][2e97556318164760bdc6ea35e7293859.png]  
我们验证下,可以通过set去修改数据进行动态变化并且get读取数据  
![在这里插入图片描述][7696818aafbb47f6a37ca4372da66544.png]

## 理解数据代理 ##

我们写一段代码简单理解数据代理

简单来说，数据代理就是：通过一个对象代理另一个对象中属性的操作（读/写）

<!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8">
        <title>初始vue</title>
        
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    
    <body>
        
        <script type="text/javascript">
           let a={
        x:100}
           let b={
        y:200}
           Object.defineProperty(b,'x',{
        
                get(){
        
                    return a.x
                },
                set(value){
        
                    a.x=value
                }
           })
        </script>
    </body>
    
    </html>

浏览器测试  
![在这里插入图片描述][5d466c10d706415593716491e699adb7.png]

## vue的数据代理 ##

首先做一个简单的数据绑定  
![在这里插入图片描述][bc0b254b37834f0a8a59c24be39c5c49.png]  
![在这里插入图片描述][309780a671114971b6b779f8dfdd91af.png]  
通过vm可以访问到name和address，说明data是被代理的  
![在这里插入图片描述][564d546c35a24ee9a3d289f8cd9da653.png]

## 总结 ##

1 vue中的数据代理  
通过vm对象来代理data对象中属性的操作(读/写)  
2 vue中的数据代理的好处  
更加方便的操作data中的数据  
3 基本原理  
通过Object.defineProperty()把data对线中所有属性添加到vm上  
为每一个添加到vm上的属性，都准备一个getter/setter方法  
在getter/setter内部去操作(读/写)data中对应的属性

[05442c492e6b4e7f8596b9a2d4244be1.png]: https://img-blog.csdnimg.cn/05442c492e6b4e7f8596b9a2d4244be1.png
[657b751159a1478e888ad065842929a6.png]: https://img-blog.csdnimg.cn/657b751159a1478e888ad065842929a6.png
[0bd9dd213c814c4da8f29c6bbfe1e211.png]: https://img-blog.csdnimg.cn/0bd9dd213c814c4da8f29c6bbfe1e211.png
[be8e7c00c3244c0b9f2e0f0fdedf241a.png]: https://img-blog.csdnimg.cn/be8e7c00c3244c0b9f2e0f0fdedf241a.png
[631a76e920aa44858eb70f91ed52668f.png]: https://img-blog.csdnimg.cn/631a76e920aa44858eb70f91ed52668f.png
[aa6d2467839f49b9afd64bb982bce85a.png]: https://img-blog.csdnimg.cn/aa6d2467839f49b9afd64bb982bce85a.png
[4a65568af87a42b580b2487de64f5b6c.png]: https://img-blog.csdnimg.cn/4a65568af87a42b580b2487de64f5b6c.png
[958440a2a5e7485983ef5452b3b1af3a.png]: https://img-blog.csdnimg.cn/958440a2a5e7485983ef5452b3b1af3a.png
[08c1d365cb65482898630e6c31ecd938.png]: https://img-blog.csdnimg.cn/08c1d365cb65482898630e6c31ecd938.png
[cedc7daa8b6a4d228c4ea49be136151e.png]: https://img-blog.csdnimg.cn/cedc7daa8b6a4d228c4ea49be136151e.png
[47f2bb1021c340868cd870e814765465.png]: https://img-blog.csdnimg.cn/47f2bb1021c340868cd870e814765465.png
[db1e10acc8a4450a8b8b4a135c1d79e3.png]: https://img-blog.csdnimg.cn/db1e10acc8a4450a8b8b4a135c1d79e3.png
[33fb32e1c9674ff58b3a3b4099d82de0.png]: https://img-blog.csdnimg.cn/33fb32e1c9674ff58b3a3b4099d82de0.png
[87ecf05f825f4cc09aa184bc26ad34b7.png]: https://img-blog.csdnimg.cn/87ecf05f825f4cc09aa184bc26ad34b7.png
[c95fb6ade99847bf85d6302fec71c05e.png]: https://img-blog.csdnimg.cn/c95fb6ade99847bf85d6302fec71c05e.png
[673f70aa6aa6492081e8fa84d930d520.png]: https://img-blog.csdnimg.cn/673f70aa6aa6492081e8fa84d930d520.png
[5d134b66b0ba47b3b61961f40eb86da7.png]: https://img-blog.csdnimg.cn/5d134b66b0ba47b3b61961f40eb86da7.png
[c55816d1c3ac4ceebb076d5cb9b96d57.png]: https://img-blog.csdnimg.cn/c55816d1c3ac4ceebb076d5cb9b96d57.png
[bb111d7b20384150bd84e594bdf1be66.png]: https://img-blog.csdnimg.cn/bb111d7b20384150bd84e594bdf1be66.png
[720f693a5a5444cb846d35f0d4209c26.png]: https://img-blog.csdnimg.cn/720f693a5a5444cb846d35f0d4209c26.png
[39f862c1c89a496b85a5637273271984.png]: https://img-blog.csdnimg.cn/39f862c1c89a496b85a5637273271984.png
[e367ddf0e0bc4fb89a8885a5e476647b.png]: https://img-blog.csdnimg.cn/e367ddf0e0bc4fb89a8885a5e476647b.png
[ffc521daf7f84ae7999d82fddaa0b56d.png]: https://img-blog.csdnimg.cn/ffc521daf7f84ae7999d82fddaa0b56d.png
[4a4421d567ac4d759367bf92dd0e236f.png]: https://img-blog.csdnimg.cn/4a4421d567ac4d759367bf92dd0e236f.png
[0436fceff6ca462e9da91677127ce183.png]: https://img-blog.csdnimg.cn/0436fceff6ca462e9da91677127ce183.png
[e3d14f03bdda4ad88762df59f780fbb3.png]: https://img-blog.csdnimg.cn/e3d14f03bdda4ad88762df59f780fbb3.png
[2e97556318164760bdc6ea35e7293859.png]: https://img-blog.csdnimg.cn/2e97556318164760bdc6ea35e7293859.png
[7696818aafbb47f6a37ca4372da66544.png]: https://img-blog.csdnimg.cn/7696818aafbb47f6a37ca4372da66544.png
[5d466c10d706415593716491e699adb7.png]: https://img-blog.csdnimg.cn/5d466c10d706415593716491e699adb7.png
[bc0b254b37834f0a8a59c24be39c5c49.png]: https://img-blog.csdnimg.cn/bc0b254b37834f0a8a59c24be39c5c49.png
[309780a671114971b6b779f8dfdd91af.png]: https://img-blog.csdnimg.cn/309780a671114971b6b779f8dfdd91af.png
[564d546c35a24ee9a3d289f8cd9da653.png]: https://img-blog.csdnimg.cn/564d546c35a24ee9a3d289f8cd9da653.png