vue源码解析1——数据代理

vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过`Object.defineProperty()`来实现对属性的劫持，达到监听数据变动的目的。其主要功能是：

1. 数据代理

2. 模板解析

3. 数据劫持

4. 双向数据绑定

本博客将带你模仿vue各功能的实现：

一 数据代理

遍历data里面所有的属性，通过Object.defineProperty()给data里每一个属性添加对应的属性描述符，在getter/setter内部去操作data中对应的属性数据。

 // MyVue 是我给自己框架起的名字相当于Vue
const vm = new MyVue({
    el: "#app",
    data: {
      msg: 'hello word'
    }
  })

function MyVue(options) {
    this.$options = options;
    var data = this._data = this.$options.data;
    var me = this;
    Object.keys(data).forEach(function(key) {  // <1> 遍历data中所有属性
        me._proxy(key); // <2> 对每一个属性实现代理
    });
    // <6> 对data进行监视 回头再看
    observe(data, this);
    // <5>创建一个用来编译模板的compile对象,用来解析模板以及模板里的指令
    this.$compile = new Compile(options.el || document.body, this)
}

MyVue.prototype = {
    $watch: function(key, cb, options) {
        new Watcher(this, key, cb);
    },

    _proxy: function(key) {
        var me = this;
        // <3> 重新定义属性的getter/setter
        Object.defineProperty(me, key, {
            configurable: false,
            enumerable: true,
            get: function proxyGetter() {
                return me._data[key];  // <4.1>读取data中对应属性值返回
            },
            set: function proxySetter(newVal) {
                me._data[key] = newVal;  // <4.2>将最新的值保存到data中对应的属性上
            }
        });
    }
};