【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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

这里可以使用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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

那问题来了，如何进行对数据的读取和修改呢？这里用到了两个方法，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>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21

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

• 1
• 2
• 3