vue響應(yīng)式系統(tǒng)的基本原理

我們使用vue時(shí)，對(duì)數(shù)據(jù)進(jìn)行操作，就能影響對(duì)應(yīng)的視圖。那么這種機(jī)制是怎么實(shí)現(xiàn)的呢？

思考一下，是不是就好像我們對(duì)數(shù)據(jù)的操作 被“某人”監(jiān)視了？一旦我們對(duì)數(shù)據(jù)進(jìn)行了更改，“某人”就能感應(yīng)到，并幫我們更新視圖

那么這個(gè)“某人”到底是誰(shuí)呢？其實(shí)它很普通，就是我們基礎(chǔ)里面有學(xué)過(guò)的?Object.defineProperty，使用它來(lái)對(duì)數(shù)據(jù)進(jìn)行一下加工，就能實(shí)現(xiàn)當(dāng)數(shù)據(jù)被讀時(shí)，執(zhí)行“讀”的回調(diào)函數(shù)；數(shù)據(jù)被寫(xiě)時(shí)，執(zhí)行“寫(xiě)”的回調(diào)函數(shù)。

接下來(lái)，我們將簡(jiǎn)單回顧該方法的使用，再用幾個(gè)實(shí)戰(zhàn)小例子帶大家徹底弄懂這個(gè)原理。

1.回顧一下Object.defineProperty的用法

參數(shù)解釋：

	obj: 目標(biāo)對(duì)象
	prop: 需要操作的目標(biāo)對(duì)象的屬性名
	descriptor: 描述符
	
	return value 傳入對(duì)象

descriptor的一些屬性，簡(jiǎn)單介紹幾個(gè)屬性。

	enumerable，屬性是否可枚舉，默認(rèn) false。
	configurable，屬性是否可以被修改或者刪除，默認(rèn) false。
	writable，屬性是否可以被修改，默認(rèn)false
	get，獲取屬性的方法。
	set，設(shè)置屬性的方法。

完整用法：

	Object.defineProperty(obj, prop, descriptor)

2.實(shí)戰(zhàn)1：使用 Object.defineProperty 對(duì) person的age屬性 進(jìn)行監(jiān)聽(tīng)

踩坑

看下面代碼，乍一看是不是感覺(jué)沒(méi)什么不妥？

當(dāng)有人讀取person的age屬性時(shí)，我就把person的age屬性return出去；當(dāng)有人修改person的age屬性，我就直接修改person.age的值。

但是！同學(xué)們，運(yùn)行了一下，雖然沒(méi)報(bào)錯(cuò)，但是編譯器一直瘋狂輸出“@@有人讀取了age屬性”。

這是為啥呢？你想想，你在get函數(shù)里面直接return person.age，這算不算又一次讀取了person的age屬性呢？此時(shí)程序又去執(zhí)行age的get函數(shù)，反反復(fù)復(fù)。

打個(gè)比方哈，相當(dāng)于 你想讀取age，于是你告訴編譯器，我要輸出person.age，好的，編譯器去查person.age，發(fā)現(xiàn)它有g(shù)et函數(shù)，于是執(zhí)行g(shù)et函數(shù)，此時(shí)你以為你要拿到它的值了，沒(méi)想到get函數(shù)里面又告訴編譯器，我要person.age。這樣的話，就形成了死循環(huán)?。?/p>

那要怎么解決呢？我在get里面不能直接返回 person.age，那我要怎么拿到這個(gè)屬性的值呢？

答：是不是可以用變量來(lái)替代呢？

我把person.age的值放在變量ageNumber中，我要讀的時(shí)候，就返回ageNumber的值；要修改的時(shí)候，就修改ageNumber的值；

這樣不就避免了在get，set函數(shù)里面直接用person.age來(lái)訪問(wèn)嗎？

正確代碼

這時(shí)，效果就完成了，讀取和修改的時(shí)候，都能被監(jiān)聽(tīng)到。

3.數(shù)據(jù)代理

數(shù)據(jù)代理是什么意思呢？

答：簡(jiǎn)單解釋一下，就是通過(guò)一個(gè)對(duì)象 代理 對(duì)另一個(gè)對(duì)象中屬性的操作 (讀/寫(xiě))

有點(diǎn)抽象對(duì)嗎？用下面的小例子來(lái)解釋一下吧。

當(dāng)老師想查看 或者 修改學(xué)生的成績(jī)時(shí)，直接在老師這個(gè)對(duì)象上操作就行了，不需要直接去操作student對(duì)象。

這也就是上面想解釋的，通過(guò) 老師對(duì)象(teacher) 代理 了學(xué)生對(duì)象(student)中的成績(jī)屬性(score)的操作 (讀/寫(xiě))

4.vue中實(shí)現(xiàn)響應(yīng)式思路

有一點(diǎn)vue2基礎(chǔ)的同學(xué)們應(yīng)該知道，我們?cè)趘ue中data() {} 中定義的數(shù)據(jù)，是不是都會(huì)被掛載到vm對(duì)象上去？然后我們是通過(guò) this.數(shù)據(jù)名 來(lái)對(duì)數(shù)據(jù)進(jìn)行操作的，對(duì)嗎？

那這個(gè)是不是就相當(dāng)于上面的小例子中的情景呢，這里是vm對(duì)象   代理   你定義的data對(duì)象中的屬性的操作（讀/寫(xiě)）

再用個(gè)例子完整實(shí)現(xiàn)一下vue的響應(yīng)式原理

把data對(duì)象中的所有屬性 交給 vm對(duì)象進(jìn)行代理（讓vm 掌控data對(duì)象中的屬性的 (讀/寫(xiě)) 操作 ）當(dāng)數(shù)據(jù)變化時(shí)，能更新對(duì)應(yīng)視圖

總結(jié)

1.Vue中的數(shù)據(jù)代理：

通過(guò)vm對(duì)象來(lái)代理data對(duì)象中屬性的操作（讀/寫(xiě)）

2.Vue中數(shù)據(jù)代理的好處：

更加方便的操作data中的數(shù)據(jù)

3.基本原理：

通過(guò)Object.defineProperty()把data對(duì)象中所有屬性添加到vm上。

為每一個(gè)添加到vm上的屬性，都指定一個(gè)getter/setter。

在getter/setter內(nèi)部去操作（讀/寫(xiě)）data中對(duì)應(yīng)的屬性。

4.vue中實(shí)現(xiàn)響應(yīng)式思路

不使用數(shù)據(jù)代理，直接把數(shù)據(jù) 賦值 掛載到vm上。

1.下圖的方法是對(duì) 數(shù)據(jù)對(duì)象設(shè)置get，set的通用方法

2.在new一個(gè)Vue時(shí)，就會(huì)直接把用戶傳入的data對(duì)象，掛載到Vue實(shí)例身上

再對(duì)Vue實(shí)例上面的data對(duì)象進(jìn)行監(jiān)視（響應(yīng)式處理）

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評(píng)論