源码分析，vue是如何实现数据代理

导语：
最近有些时间，所以就去看看vue的源码，并且看看一些东西是怎么实现的，以前只是会用而已，但是想要突破自己，就得去学习源码。

数据代理就是通过一个对象代理来对另一个对象中的属性实现读和写的操作。很大程度上方便了我们对数据进行操作。

我们在使用vue的时候，是不是经常在js里面使用this.message，就可以获得this.data的message的信息，这里就是用了数据代理。

this就是指向new Vue构造函数创建出来的vm实例，让访问Vue的属性代理为访问Vue.data的属性。

那么具体是怎么实现的呢？

其实实现的原理就是在Object.defineProperty外面再包一层属性，将访问myvue，代理到myvue.data上。

function myVue (data, el, exp) {
   
    var self = this;
    this.data = data;
 	//遍历所有属性名，把所有属性名通过defindeProperty方法添加到代理上，并定义get和set方法，实现对数据的操作
    Object.keys(data).forEach(function(key) {
   
        self.proxyKeys(key);  // 绑定代理属性
    });
 	//这里对订阅者进行初始化，不过跟数据绑定关系不大直接省略不写了。。。。。。
    return this;
}
 
myVue.prototype = {
   
    proxyKeys: function (key) {
   
        var self = this;
        Object.defineProperty(this, key, {
   
            enumerable: false,
            configurable: true,
            get: function proxyGetter() {
   
                return self.data[key];
            },
            set: function proxySetter(newVal) {
   
                self.data[key] = newVal;
            }
        });
    }
}

补充：

微信搜索【web小馆】，回复全栈博客项目，即可获取项目源码和后续的实战文章教程。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！