防Vue系列-12 数据代理Proxy函数

Vue解析总纲
上一节：防Vue系列-11 为防Vue系列-07添加响应式代码

在vue中可以通过this.age来获取age的值

• 接下我们将创建一个proxy函数作用数据代理

    /**
       *@params target:any (当前vue实例对象)
       *@params data:String
       *@params key:any
   */
   // 中间代理proxy  将某个对象属性映射到另一个对象的属性上
   function proxy(target, data, key) {
      Object.defineProperty(target, key, {
        enumerable: true,
        configurable: true,
        set(newVal) {
          // this[data][age] = newVal
          target[data][key] = newVal;
        },
        get() {
          // 返回this[data][age]
          return target[data][key];
        },
     });
  }

接下来就在我们的Vue构造函数中添加

	function Vue(options) {
        // 内部数据使用_ 开头 ，只读数据$开头
        this._data = options.data;
        this._el = options.el;
        //准备工作(模板)
        this.$el = this._templateNode = document.querySelector(this._el); //获取挂载的对象
        this._parent = this._templateNode.parentNode; //父节点

        //将数据全部转成响应式的
        deepProperty.call(this, this._data);
        // proxy 属性代理
       let keys = Object.keys(this.data);
          for (let index = 0; index < keys.length; index++) {
            // 代理方法;
            proxy(this, "_data", keys[index]);
        }
        //挂载
        this.mount();
      }