Vue-数据代理

殊序

已于 2024-09-09 16:53:00 修改

阅读量826

点赞数 16

分类专栏： vue 文章标签：前端 vue.js javascript 前端框架

于 2024-09-07 15:29:52 首次发布

本文链接：https://blog.csdn.net/m0_63563047/article/details/141996020

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

数据代理是什么？

数据代理是一种在编程中常用的技术，它允许通过一个对象来代理对另一个对象的属性进行操作，包括读取和写入。这在JavaScript中尤其常见，尤其是在一些流行的框架中，如Vue.js中。数据代理通常是通过建立依赖关系，来实现数据的响应方式更新以及视图与数据的同步。

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

Object.defineProperty()

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

运用代码演示该方法的使用

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

运行后打开控制台可以看到，属性已经被已添加到对象中，观察控制台可以发现新增属性同原有属性颜色不一样，新增属性是区别于原属性的，因为使用 Object.defineProperty()添加的属性默认是不可以被枚举的，简单理解就是不可被遍历出来。

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

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

使用此方法向对象中添加属性对比普通追加属性的方式，此方法对添加的属性能进行一定的把握和控制，可以控制是否删除，控制是否修改等等

下面是这个方法的一个示例：

const person = {};
 // 使用 Object.defineProperty 定义一个属性
Object.defineProperty(person, 'name', {
    value: 'Alice',
    writable: false,   // 不可修改
    enumerable: true,  // 可枚举
    configurable: false // 不可删除
});
 // 访问属性
console.log(person.name); // Alice
 // 尝试修改属性
person.name = 'Bob'; // 不会有任何效果
console.log(person.name); // 仍然是 Alice
 // 尝试删除属性
delete person.name; // 不会删除
console.log(person.name); // 仍然是 Alice
 // 列举属性
for (let key in person) {
    console.log(key); // 输出: name
}

引入数据代理：

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

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

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

</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="root">
        <h2>姓名：{{name}}</h2>
        <h2>性别：{{sex}}</h2>
    </div>
</body>

<script>
    Vue.config.productionTip = false;

   const vm =  new Vue({
        el:'#root',
        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中的数据实现的。