【VUE前进之路】使用数据代理，计算属性与监视属性的妙用

1.数据代理

1.1什么是数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）
1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
2.Vue中数据代理的好处:更加方便的操作data中的数据
3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上。为每一一个 添加到vm上的属性，都指定个getter/setter。在getter/setter内部去操作(读/写) data中对应的属性。简单来说就是把data的属性全部都复制给了_data了一份，可以让vm进行使用

1.2了解使用数据代理

Object.defineProperty方法（给对象添加属性方法的一个方法）这个方法会传入三个参数分别是 对象名，属性名，配置项
在这里我们可以看到，这个颜色稍微的优点变化（这里就是使用Object.defineProperty方法进行添加的，这里的age是不可以进行枚举的，即不参与遍历）

    <script>
    let person = {
     
        name:'大熊'
        sex:'男',
    }    
    Object.defineProperty(person,'address',{
     
        value:18
    })
    console.log(person);
    </script>

这里可以使用Object.keys()进行验证一下（并没有age这个属性）（可以看到依然没有age）

当然也可以使用for… in进行遍历一下这个对象

如和才能让他可以被枚举呢？（这里就使用 enumerable 只要将它的值改为true即可）enumerable: true （是否可以被枚举）writable:true（是否可以修改属性）configurable: true（是否可以删除改属性）这四个基本配置项的内容（包括value）他们的默认值为false

    <script>
    let person = {
     
        name:'大熊',
        sex:'女',
    }    
    Object.defineProperty(person,'address',{
     
        value:18
    })
    for(k in person){
     
        console.log(k);
    }
    console.log(Object.keys(person));
    console.log(person);
    </script>

那问题来了，如何进行对数据的读取和修改呢？这里用到了两个方法，get和set
当有人读取person的age属性时，get函 数(getter)就会被调用，且返回值就是age值
当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具值

    <script>
        let number = 19;
        let person = {
     
            name: '大熊',
            sex: '女',
        }
        Object.defineProperty(person, 'address', {
     
            get() {
     
                console.log('age属性已被读取');
                return number;
            },
            set(value) {
     
                console.log('age属性已被修改');
                number = value
            }
        })
    </script>

2. 事件处理

1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上
3.methods中配置的函数，不可以使用箭头函数，否则this就不是vm了而是window
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象5.@click="demo"和@click="demo"效果一致，但后者可以传参
注：不要把事件回调方法data里，虽然可以实现相同的功能，但是这样会给增加一个数据代理，给一个方法添加数据代理是没有意义的

<div id="user">
        <h1>{
  {name}}吃饭了吗？</h1>
        <button v-on:click