【手写打卡】模拟一个vue的数据代理

我们在使用vue时，可以通过this.xxx 访问到data里的xxx，对应的我们也可以设置this.xxx = 1来设置data里的数据

var vm = new Vue({
  data() {
    return {
      a: 1,
      b: 2
    }
  }
})
// 我们想跟vue一样 实现vm.a 访问=> data里的a
// vm.b = 3 来设置 => data里的b
console.log('vm.a:', vm.a)
vm.b = 3

在vue里这段代码肯定是可以正确执行的，下面我们写一个简单的vue来实现这个

function Vue(options) {
  var _this = this
  var _data = options.data()

  for (var k in _data) {
    // this.a -> get -> _data.a 访问this.a 返回 data.a
    // 设置 this.b时  设置为data.b
    Object.defineProperty(_this, k, {
      get() {
        return _data[k]
      },
      set(newValue) {
        _data[k] = newValue
      }
    })
  }
}

这是我们执行一下代码 发现 打印的结果为 a:2
检测一下代码发现 遍历data的时候定义k用了var，导致最后绑定的都是data里的最后一项，也就是b的值
下面改造一下

function Vue(options) {
  var _this = this
  var _data = options.data()

  for (var k in _data) {
    // this.a -> get -> _data.a 访问this.a 返回 data.a
    // 设置 this.b时  设置为data.b
    (function (k) {
      Object.defineProperty(_this, k, {
        get() {
          return _data[k]
        },
        set(newValue) {
          _data[k] = newValue
        }
      })
    })(k)
  }
}

通过加了一个自执行函数，来创建一个独立的作用域 来保存每一次枚举出来的k
这时打印的结果为a : 1
当然我们直接用 let 替换var也是没有问题的