我们在使用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也是没有问题的
