vue中的数据代理

原理：通过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>