vue源碼探究（第三彈）
結(jié)束了之前prepare蛛勉，現(xiàn)在開始正式進入vue源碼探究部分
數(shù)據(jù)代理
先從簡單的入手剔桨，我們先手動實現(xiàn)一個簡易版的數(shù)據(jù)代理吧限匣。
基礎(chǔ)知識
- vue數(shù)據(jù)代理: data對象的所有屬性的操作(讀/寫)由vm對象來代理操作
- 好處: 通過vm對象就可以方便的操作data中的數(shù)據(jù)
- 實現(xiàn):
1). 通過Object.defineProperty(vm, key, {})給vm添加與data對象的屬性對應(yīng)的屬性
2). 所有添加的屬性都包含get/set方法
3). 在get/set方法中去操作data中對應(yīng)的屬性
舉個例子??
<div id="test"></div>
<script type="text/javascript" src="js/mvvm/compile.js"></script>
<script type="text/javascript" src="js/mvvm/mvvm.js"></script>
<script type="text/javascript" src="js/mvvm/observer.js"></script>
<script type="text/javascript" src="js/mvvm/watcher.js"></script>
<script type="text/javascript">
// 這里取名為mvvm 是因為在mvvm.js中
// 是這樣暴露的 function MVVM(options) {} 這里的MVVM和vue是一樣的 只是一個命名的問題
const vm = new MVVM({
el: "#test",
data: {
name: '張三2'
}
})
console.log(vm.name) // 讀取的是data中的name, vm代理對data的讀操作
vm.name = '李四2' // 數(shù)據(jù)保存到data中的name上, vm代理對data的寫操作
console.log(vm.name, vm._data.name) // 李四2 李四2
</script>
上面這部分是為了簡單說明讥珍，我們寫的mvvm實現(xiàn)了簡單的數(shù)據(jù)代理历极，接下來，我們來剖析一下它的內(nèi)部實現(xiàn)衷佃。
先揭一個底趟卸，它的核心實現(xiàn)就是之前講過的Object.defineProperty
/*
相關(guān)于Vue的構(gòu)造函數(shù)
*/
function MVVM(options) {
// 將選項對象保存到vm
this.$options = options;
// 將data對象保存到vm和datq變量中
var data = this._data = this.$options.data;
//將vm保存在me變量中
var me = this;
// 遍歷data中所有屬性
Object.keys(data).forEach(function (key) { // 屬性名: name
// 對指定屬性實現(xiàn)代理
me._proxy(key);
});
// 對data進行監(jiān)視
observe(data, this);
// 創(chuàng)建一個用來編譯模板的compile對象
this.$compile = new Compile(options.el || document.body, this)
}
MVVM.prototype = {
$watch: function (key, cb, options) {
new Watcher(this, key, cb);
},
// 對指定屬性實現(xiàn)代理
_proxy: function (key) {
// 保存vm
var me = this;
// 給vm添加指定屬性名的屬性(使用屬性描述)
Object.defineProperty(me, key, {
configurable: false, // 不能再重新定義
enumerable: true, // 可以枚舉
// 當(dāng)通過vm.name讀取屬性值時自動調(diào)用
get: function proxyGetter() {
// 讀取data中對應(yīng)屬性值返回(實現(xiàn)代理讀操作)
return me._data[key];
},
// 當(dāng)通過vm.name = 'xxx'時自動調(diào)用
set: function proxySetter(newVal) {
// 將最新的值保存到data中對應(yīng)的屬性上(實現(xiàn)代理寫操作)
me._data[key] = newVal;
}
});
}
};
Tips：
在源碼學(xué)習(xí)的過程中，掌握到了一個小技巧氏义，讀源碼的時候锄列，debugger會更加的方便。
image.png
image.png
非常好用惯悠，我之前太蠢了邻邮，只會第一個resume script execution
最后
未完待續(xù)...
接下來，還有一個更有趣的東西
下一章繼續(xù)~
