【理解Vue数据代理】

作者：小丑西瓜9 | 2024-05-05 20:32:50

踩

vue数据代理

理解Vue数据代理

何为数据代理？

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

要搞懂Vue数据代理这个概念，那我们就要从Object.defineProperty()入手，Object.defineProperty()是Vue中比较底层的一个方法，在数据劫持，数据代理以及计算属性等地方都或多或少的用到了本函数

Object.defineProperty()

参数一：需要添加或设置属性的对象
参数二：需要添加或设置属性的属性名
参数三：配置对象

接下来通过代码演示此方法的使用

<script>
  let Study ={
      name:'张三',
      sex:'男'
  }
  // 此时往对象里添加属性，就可调用此方法
  Object.defineProperty(Study, 'age', {
      value:'18',
  })
  console.log(Study);
</script>
1
2
3
4
5
6
7
8
9
10
11

此时，在控制台中，可以看到，属性已经被已添加到对象中，但仔细观察，通过方法后添加上的属性区别于原有属性，这是因为使用 Object.defineProperty()添加的属性默认是不可以被枚举的，这也是一个比较细的点，所谓不可枚举，简单理解就是不可被遍历出来

在这里插入图片描述

因此，在方法配置项中，有以下几个配置较为值得注意

enumerable:true,    //控制属性是否可以枚举，默认值为false
writable:true       //控制属性是否可以被修改，默认值为false  
configurable:true   //控制属性是否可以被删除，默认值为false
1
2
3

虽然使用此方法向对象中添加属性比较麻烦一点，但是，对比普通追加属性的方式，此方法的好处就在于对添加的属性能进行一定的把握和控制，可以控制是否删除，控制是否修改等等

引入数据代理：

<script>
    var age = 19;
    let Study ={
        name:'张三',
        sex:'男'
    }
    // 此时往对象里添加属性，就可调用此方法
    Object.defineProperty(Study, 'age', {
        // 读取Study的age属性时，get函数就会被调用，且返回值就是age属性的值
        get:function(){
            return age;
        }
    })
    console.log(Study);
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

此时我们访问age属性时，返回的就是getter的返回值，也就是age的属性值,且每次访问age属性，都会触发getter函数的调用

在这里插入图片描述

<script>
    var age = 18;
    let Study ={
        name:'张三',
        sex:'男'
    }
    // 此时往对象里添加属性，就可调用此方法
    Object.defineProperty(Study, 'age', {
        // 读取Study的age属性时，get函数就会被调用，且返回值就是age属性的值
        get:function(){
            return age;
        },
        // 修改Study的age属性时，set函数就会被调用，且会传入修改的值
        set:function(value){
            age = value;
        }
    })
    console.log(Study);

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

此时，我们就完成了整个Object.defineProperty()方法的实际使用，这时候，age这个变量就和Study.age属性建立了联系，只要任意其中一个的值一修改，另一个的值也会随之更新
在这里插入图片描述

数据代理

接下来，我们正式进入数据代理
代码实现简单数据代理

<script>
    let Obj1 = {
        name:'张三',
        age:18
    }
    let Obj2 = {
        sex:'男',
    }

    Object.defineProperty(Obj2, 'age',{
        get(){
            return Obj1.age
        },
        set(value){
            Obj1.age = value
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这就是一个简单的数据代理，通过Obj2可以对Obj1里的属性值进行操作

Vue中的数据代理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue.js -->
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
    </div>
</body>

<script>
    Vue.config.productionTip = false;

   const vm =  new Vue({
        el:'#app',
        data:{
            name:'张三',
            sex:'男'
        }
    })
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

此时，在控制台输出vm，可以看到，属性都做了数据代理，也就是通过getter和setter访问，而data中的数据，又是通过_data拿到的，修改data中的属性，也需要经过_data,也就是说_data其实就是data的数据代理
在这里插入图片描述

总结

Vue中数据代理就是通过Object.defineProperty()把data对象中所有的属性添加到vm上，且数据从data到vm中的过程，又为每一个属性添加上getter和setter方法，用户修改或者读取时，也是通过getter或setter方法访问_data，_data返回或操作data中的数据实现的。

在这里插入图片描述

以上就是个人对Vue数据代理的理解，自己理解的也不是很全面，但是描述起来较为容易理解，也算是自己对Vue数据代理的一个总结。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/540717