vue2学习笔记--数据代理

vue2学习笔记--数据劫持、Vue中的数据代理

一.了解 defineProperty

1. 先定义一个对象

let person = {
    name: '张三',
    sex: '男'
};

2. 使用defineProperty添加属性

Object.defineProperty(person, 'age', {
    value: 18
});

输出person

person中的通过defineProperty添加的属性默认不可枚举、不可修改、不可删除,可通过添加配置项enumerable、writable、configurable来枚举、修改、删除.

3. 定义两个个对象

let ageNum = 20;
let person = {
    name: '张三',
    sex: '男',
    age: ageNum
};

输出结果

4. 使用defineProperty添加属性, 使两个对象产生关联

let ageNum = 20;
let person = {
    name: '张三',
    sex: '男',
};
Object.defineProperty(person, 'age', {
    get: function() {
        return ageNum;
    },
    set: function(value) {
        ageNum = value;
    }
});

输出结果

1. 读取person的age属性时, get函数(getter)就会被调用, 且返回值就是age的值
2. 修改person的age属性时, set函数(setter)就会被调用, 且会收到修改的具体值

代码1 更改person里的age, ageNum不会更改; 代码2 更改person里的age, ageNum会更改

二. 理解数据代理

通过一个对象代理对另一个对象属性的操作

二. Vue中的数据代理

const vm = new Vue({

    el: '#root',

    data: {

        name: '张三',

        sex: '男'

    }

})

vm._data是将data中的数据进行了数据劫持

可更改vm.name和vm._data.name验证数据代理

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