03-Vue数据代理

Love The Way You Lie 2024-05-03 14:33 9阅读 0赞

![在这里插入图片描述][e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]

#### 文章目录 ####

*  前言
 *  Object的defineProperty方法
 *  数据代理

## 前言 ##

> 📋前言📋  
> 💝博客：【无聊大侠hello word】💝  
> ✍有一点思考，有一点想法，有一点理性！✍  
> ✍本文由在下【无聊大侠hello word】原创，首发于CSDN✍

## Object的defineProperty方法 ##

*  可以使用Object.deefineProperty为一个对象添加一个属性：

let person = {
        
        name: '张三',
        sex: '男'
    }
    
    // 为person对象添加一个age属性，值是18
    // Object.defineProperty方法的参数：
    // 参数1：要操作的对象
    // 参数2：对象属性名
    // 参数3：配置项
    Object.defineProperty(person, 'age', {
        
        value: 18
    });
    console.log(person);

*  添加上来的age属性，在浏览器控制台显示的颜色比较淡。该属性不能枚举（不参与遍历）：

// 遍历person对象的所有属性，只能遍历到 name、sex，不能遍历到age
    console.log(Object.keys(person));
    // 使用for循环也不能遍历到age
    for (const key in person) {
        
        console.log(key + ":" + person[key]);
    }

*  如果想要添加进来的age属性可以枚举，需要在设置时添加另外一个配置项：

Object.defineProperty(person, 'age', {
        
        value: 18,
        enumerable: true  // 控制属性是否可以枚举，默认值false
    });

其他的基本配置项：

*  value：属性的值
 *  enumerable：是否可以枚举，默认false
 *  writable：是否可以被修改，默认false
 *  configurable：是否可以被删除，默认false

Object.defineProperty(person, 'age', {
        
        value: 18,  // 设置属性值为18
        enumerable: true,  // 可以枚举
        writable: true,  // 可以修改
        configurable: true  // 可以删除
    });

高级用法：

*  属性值是一个变量，需要根据变量的变化而变化。

let num = 18;
        let person = {
        
            name: '张三',
            sex: '男',
            age: num
        };
        console.log(person);
        
        num = 19;
    	// 此时，虽然num改成了19，但是person.age还依然是18
        console.log(person);

使用Object.defineProperty实现：

除了可以设置getter外，可以设置setter：

## 数据代理 ##

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

例如：通过obj2操作obj1的x属性

在Vue中，构造出的vm对象data中的变量，也是通过数据代理实现的：

const vm = new Vue({
        
        data: {
        
            name: 'tom',
            age: 18
        }
    });
    console.log(vm);

*  在控制台查看vm的name、age属性，是通过数据代理加进来的，有自己的getter/setter。
 *  当读取vm的name属性时，会调用name的getter，getter方法将data的name读取出来；
 *  当修改vm的name属性时，会调用name的setter，setter方法将data的name值修改。

vm会将编码的data存储在vm.\_data中：

let data = {
        
        message: "test"
    };
    
    const vm = new Vue({
        
        el: '#app',
        data: data
    });
    
    // vm._data和data完全相等
    console.log(vm._data === data);
    console.log(vm._data.message); // 可以正常输出，所以vm.message取出来的实际是vm._data.message

**先赞后看，养成习惯！！！^ \_ ^ ❤️ ❤️ ❤️  
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！**

[e27293b9af5b4ba4aebdd5a07ad72bee.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/03/68015140cf464631a41ecaa32043ebbf.gif