我們在使用vue時(shí)，可以通過this.xxx 訪問到data里的xxx玄妈，對應(yīng)的我們也可以設(shè)置this.xxx = 1來設(shè)置data里的數(shù)據(jù)
var vm = new Vue({
data() {
return {
a: 1,
b: 2
}
}
})
// 我們想跟vue一樣 實(shí)現(xiàn)vm.a 訪問=> data里的a
// vm.b = 3 來設(shè)置 => data里的b
console.log('vm.a:', vm.a)
vm.b = 3
在vue里這段代碼肯定是可以正確執(zhí)行的侦镇，下面我們寫一個(gè)簡單的vue來實(shí)現(xiàn)這個(gè)
function Vue(options) {
var _this = this
var _data = options.data()
for (var k in _data) {
// this.a -> get -> _data.a 訪問this.a 返回 data.a
// 設(shè)置 this.b時(shí) 設(shè)置為data.b
Object.defineProperty(_this, k, {
get() {
return _data[k]
},
set(newValue) {
_data[k] = newValue
}
})
}
}
這是我們執(zhí)行一下代碼 發(fā)現(xiàn) 打印的結(jié)果為 a:2
檢測一下代碼發(fā)現(xiàn) 遍歷data的時(shí)候定義k用了var灵疮，導(dǎo)致最后綁定的都是data里的最后一項(xiàng)，也就是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
// 設(shè)置 this.b時(shí) 設(shè)置為data.b
(function (k) {
Object.defineProperty(_this, k, {
get() {
return _data[k]
},
set(newValue) {
_data[k] = newValue
}
})
})(k)
}
}
通過加了一個(gè)自執(zhí)行函數(shù)壳繁，來創(chuàng)建一個(gè)獨(dú)立的作用域 來保存每一次枚舉出來的k
這時(shí)打印的結(jié)果為a : 1
當(dāng)然我們直接用 let 替換var也是沒有問題的
