第八节-vue2简单的响应式原理

响应式原理实现

// data必须是一个方法,避免使用同一个引用
var vm = new MyVue({
  data() {
    return {
      a: 1,
      b: 2
    }
  }
})

function Myvue(option) {
  this.$data = option.data();
  let _this = this;
  for(var k in this.$data) {
    (function(k) {
      // 独立作用域
      // Object.defineProperty(_this, k, {
      //   get: function() {
      //     return _this.$data[k];
      //   },
      //   set: function(val) {
      //     _this.$data[k] = val;
      //   }
      // })
      // 实例上继承上的方法 -> 底层方法代替get/set
      _this.__defineGetter(k, function() {
        return _this.$data[k];
      })
      _this.__defineSetter(k, function(newVal) {
        _this.$data[k] = newVal;
      })
    })(k);
  }
}