vue中的数据代理_vue数据代理

数据代理是什么：

通过一个对象代理，对另一个对象中属性的操作
简单就是说：可以通过 对象b 对 对象a 中的属性进行操作
这里我学到的数据代理是用Object.defineProperty这个方法进行操作

		let obj = {x:100};
        let obj2 = {y:200};

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x;  //这里添加的obj2的属性x得到了getter返回的值
            },
            set(value){
                obj.x = value; //这里修改obj2的x值时就会调用setter，并把修改的值返回给value
            }
        })
1
2
3
4
5
6
7
8
9
10
11

这里补充讲一下Object.defineProperty中的getter和setter

利用上面的代码分析一下：

当读取 obj2.x 时，就会调用getter，然后把getter中的返回的值给obj2.x
。。。
当有人修改 obj.2 时，就会调用setter，并且得到修改的具体值，然后返回给value

vue中的数据代理

总结：

1.vue中的数据代理：
通过vm对象来处理data对象中属性的操作

2.vue中数据代理的好处：
更加方便的操作data中的数据

3.基本原理：
通过Object.defineProperty() 把data对象中所有属性添加到vm上
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作data中对应的属性

解析：

const vm = new Vue({
            el: '.root',
            data: {
                name:'小张',
            }
        })
1
2
3
4
5
6

数据代理在vue中的作用：

就是把data中的属性放到vm中一份，就是为了让编码更方便
就是可以通过vm对data中的属性进行操作（这就是数据代理的定义）
data中的属性直接就放在了vm中，可以利用setter和getter对data进行操作

工作原理：
为每一个添加到vm上的属性，都指定一个getter/setter

getter
去读取vm.name时，就会利用getter去读取返回data中name的值

（这里我理解的是：vm.name中的getter它一直返回的值就是data中的name值，就是getter这个东西里面的那个return后面的东西就是data.name）

 Object.defineProperty(vm,'name',{
       getter() {
           return data.name
       }
   })
1
2
3
4
5

setter
修改vm.name时，就会利用setter去修改data中的name，然后页面中用到name的地方就会发生改变