vue源码分析（一）——数据代理

准备

1、[].slice.call(lis): 将伪数组转换为真数组
2、node.nodeType: 得到节点类型
3、Object.defineProperty(obj, propertyName, {}): 给对象添加/修改属性(指定描述符)

• configurable: true/false 是否可以重新define
• enumerable: true/false 是否可以枚举(for…in / keys())
• value: 指定初始值
• writable: true/false value是否可以修改存取(访问)描述符
• get: 函数, 用来得到当前属性值
• set: 函数, 用来监视当前属性值的变化

4、Object.keys(obj): 得到对象自身可枚举的属性名的数组
5、DocumentFragment: 文档碎片(高效批量更新多个节点)
6、obj.hasOwnProperty(prop): 判断prop是否是obj自身的属性

数据代理

data 对象中的所有属性的操作（读/写）由vm对象来代理操作，这样操作data比较方便

const vm = new MVVM({
  data: {
    name: 'tom2'
  }
})
  
原本的读写方式：
vm._data.name = '张三'  //写
console.log(vm._data.name)   //读

现在的读写方式：
vm.name = '张三'  //写
console.log(vm.name)   //读

实现：

1、通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性相对应的属性key
2、所有添加的属性都包含get/set方法
3、在get/set方法中去操作data中对应的属性（当输入 vm.name 时，自动调用 get 方法）

源码分析：

/* 
相当于Vue的构造函数
*/
function MVVM(options) {
    // 将配置对象保存到vm上
    this.$options = options;
    // 将data对象保存到vm和局部变量data上
    var data = this._data = this.$options.data;
    // 将vm保存到变量me
    var me = this;

    // 遍历data中所有属性
    Object.keys(data).forEach(function(key) { // 某个属性: name
        // 对当前属性实现数据代理
        me._proxy(key);
    });

    // 对data中所有层次属性进行监视劫持
    observe(data, this);

    // 创建一个编译对象(编译模板)
    this.$compile = new Compile(options.el || document.body, this)
}

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

    _proxy: function(key) {// name
        var me = this;
        // 给vm添加指定的属性
        Object.defineProperty(me, key, {
            configurable: false, // 不可重新定义
            enumerable: true, // 可以枚举遍历
            // 当通过vm.xxx读取属性值时自动调用
            get: function proxyGetter() {
                // 读取data中对应的属性值返回
                return me._data[key];
            },
            // 当通过vm.xxx = value修改属性时, 自动调用
            set: function proxySetter(newVal) {
                // 将最新的值保存到data对应的属性上
                me._data[key] = newVal;
            }
        });
    }
};