vue__数据代理

  1. 数据代理: 通过一个对象代理对另一个对象中属性的操作(读/写)
  2. vue数据代理: 通过vm对象来代理data对象中所有属性的操作
  3. 好处:更方便的操作data中的数据
  4. 基本实现流程:
    a: 通过Object.defineProperty()给 vm 添加 与 data 对象的属性对应的属性描述符
    b: 所有添加的属性都包含 getter/setter
    c: getter/setter 内部去操作 data中对应的属性数据
  5. 代码
  6. _proxy:function(key){
      // 保存vm
      var me = this;
      // 给 vm添加指定属性名的属性(使用的属性描述符)
      Object.defineProperty(me,key,{
        configurable:false,// 不能重新定义
        enumerable:true, // 可以枚举遍历
        // 当通过vm.xxx读取属性值时调用, 从data中获取对应的属性值返回  代理读操作
        git:function proxyGetter(){
          return me._data[key];
        },
        // 当通过vm.xxx = value时 , value被保存到data中对应的属性上  代理写操作
        set:function proxySetter(newVal){
          me.data[key] = newVal;
        }
    }
    }
posted @ 2020-07-18 10:53  飞鸟和蝉-  阅读(509)  评论(0编辑  收藏  举报