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)就会被调用，且会收到修改的具值文章来源：https://www.toymoban.com/news/detail-783085.html
<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里，虽然可以实现相同的功能，但是这样会给增加一个数据代理，给一个方法添加数据代理是没有意义的文章来源地址https://www.toymoban.com/news/detail-783085.html
<div id="user">
<h1>{
{name}}吃饭了吗？</h1>
<button v-on:click到了这里，关于【VUE前进之路】使用数据代理，计算属性与监视属性的妙用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
