对数据代理的理解

概念：

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

Object.defineProperty(obj, prop, descriptor)

参数

obj       要在其上定义属性的对象。

prop      要定义或修改的属性的名称。

descriptor       将被定义或修改的属性描述符。

返回值

    被传递给函数的对象。

举例：

    <script>
        let obj = { x: 100 };
        let obj2 = { y: 200 };

        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x;
            },
            set(value) {
                console.log('有人修改了x的大小，修改的值为', value);
                obj.x = value;
            }
        });
    </script>

//首先我们先创建一个person对象
let person = {
    name: '孙悟空',
    sex: '男'
 }

//使用 definProperty 定义属性
 Object.defineProperty(person, 'age', {
       // value: 18,//你在这个里面写的话就变得不可枚举
       // enumerable: true,//控制属性是否可枚举，默认是false
       // writable: true,//控制属性是否可以被修改，默认值是false
       // configurable: true,//控制属性是否可以被删除,默认值false

       //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
       get() {
           console.log('有人修改了age的值');
           return number
       },
       //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体指
       set(value) {
           console.log('有人修改了age属性，且值是', value);
           number = value;
     }
 })

console.log(person);
console.log(Object.keys(person));

在vue中的使用数据代理

在vue中使用都是通过vm对象来代理data对象中属性的操作(读/写)

vue中数据代理的好处:

        更加方便的操作data中的数据

基本原理：

        通过Object.defineProperty()把data对象中所有属性添加到vm上。

        为每一个添加到vm上的属性，都制定一个getter/setter

        在getter/setter内部去操作(读/写)data中对应的属性

 举例：

    <div id="root">
        <h2>学校名称:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false;//阻止vue在启动时生成生产提示
        const vm = new Vue({
            el: '#root',
            data: {
                name: '孙悟空',
                address: '西游记'
            }
        })
    </script>