02何为数据代理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<!-- 数据代理:通过一个对象代理对领一个对象中的属性的操作(读/写) -->

​ <!-- 这里是ojb2通过数据代理操作和使用object1的x -->
<script>
let obj1={x:100};
let obj2={y:200};
Object.defineProperty(obj2,"x",{
get(){
return obj1.x
},
set(value){
obj1.x=value
}

​ })
​ </script>
​ <!--
​ 1.Vue中的数据代理:
​ 通过vm对象来代理data对象中属性的操作 (读/写)
​ 2.Vue中数据代理的好处
​ 更加方便的操作data中的数据
​ 3.基本原理
​ 通过object.defineProperty()把data对象中所有属性都添加到vm上。
​ 并为每一个添加到vm上的属性,都指定一个getter/setter
​ 在getter/setter内部去操作(读/写)data中相应的属性
​ -->
<script>
new Vue({
el:'#root',
data:{
name:'helloworld'
}
})
​ </script>

数据代理图示:

  1. Vue中的数据代理:
    1. 通过vm对象来代理data对象中属性的操作 (读/写)
  2. Vue中数据代理的好处
    1. 更加方便的操作data中的数据
  3. 基本原理
  4. 通过object.defineProperty()把data对象中所有属性都添加到vm上。
    并为每一个添加到vm上的属性,都指定一个getter/setter
    在getter/setter内部去操作(读/写)data中相应的属性

image-20220724171845259

额外补充:

  1. 在vm对象中的_data,vue为了能做响应式,在_data做了==数据劫持==。所以打开_data后看到的不是跟原始data对象一样,而是经过了数据劫持的处理

image-20220724171956764