vue中的数据代理
阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |
原理：通过vm对象来代理 Vue 中我们自己定义在data中的数据，
首先： 我们自己定义的data中的对象或者属性 都会存储到vm中的_data 中进行数据劫持
其次： 通过Object.defineProperty() 方法的getter 和 setter 将_data中的数据设置到vm本身，从而更方便去使用
学习 Object.defineProperty() 话不多说直接上图
1 <template>
2 <div class="home">
3 </div>
4 </template>
5
6 <script>
7 // @ is an alias to /src
8
9 export default {
10 name: 'DefinePropoty',
11 components: {
12 },
13 mounted () {
14 var that = this
15 Object.defineProperty(this.person, 'age', {
16 value: 'boy', // 设置值
17 enumerable: true, // 可遍历
18 writable: true, // 是否可以被修改
19 configurable: true, // 控制是否可以被删除
20 // 当有人读取age的属性的时候 get就会呗调用 且get的返回值是age的值
21 get () {
22 return that.number
23 },
24 // 当有人修改age属性的时候 触发 且参数为修改的值
25 set (val) {
26 that.number = val
27 }
28 })
29 // this.$delete(this.person, 'sex') 删除对象的属性
30 // 访问age
31 console.log(this.person.age)
32 // 修改age
33 this.person.age = 666
34 },
35 data () {
36 return {
37 number: 20,
38 person: {
39 name: 'GQ',
40 sex: '男',
41 age: this.number
42 }
43 }
44 }
45 }
46 </script>
实例 ： 通过 obj2代理obj1
1 <template>
2 <div>
3 <!-- 数据代理 修改一个对象的某个属性另外一个对象也随之改变 -->
4 </div>
5 </template>
6
7 <script>
8 export default {
9 name: 'DataMange',
10 mounted () {
11 var that = this
12 // 给obj2添加一个x属性 有人读取就返
13 Object.defineProperty(this.obj2, 'x', {
14 // 有人读取obj2 的x就把obj1的X给他
15 get () {
16 return that.obj1.x
17 },
18 // 有人修改obj2的x就把obj1的x也修改
19 set (val) {
20 that.obj1.x = val
21 }
22 })
23 console.log(that.obj2.x)
24 that.obj2.x = 6666
25 console.log(that.obj1.x)
26 },
27 data () {
28 return {
29 obj1: {
30 x: 66
31 },
32 obj2: {
33 y: 888
34 }
35 }
36 }
37 }
38 </script>
39
40 <style lang="scss" scoped>
41 </style>
阿里云国际版折扣https://www.yundadi.com |
| 阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6 |