何为数据代理?

通过一个对象代理对另一个对象中的属性的操作(读/写),就是数据代理。

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

Object.defineProperty()

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

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

<script>
  let Study ={
      name:'张三',
      sex:'男'
  }
  // 此时往对象里添加属性,就可调用此方法
  Object.defineProperty(Study, 'age', {
      value:'18',
  })
  console.log(Study);
</script>

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

在这里插入图片描述

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

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

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

引入数据代理:

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

此时我们访问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>

此时,我们就完成了整个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>

这就是一个简单的数据代理,通过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>

此时,在控制台输出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数据代理的一个总结。

Logo

前往低代码交流专区

更多推荐