【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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/gushi/2024-04-05/154605.html，文章来源：网络cs，作者：璐璐，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！