目錄

• 響應式系統的基本原理
• 1.回顧一下Object.defineProperty的用法
• 2.實戰1：使用 Object.defineProperty 對 person的age屬性 進行監聽
• 3.資料代理
• 4.vue中實現響應式思路
• 總結
• 1.Vue中的資料代理：
  
• 2.Vue中資料代理的好處：
  
• 3.基本原理：
  
• 4.vue中實現響應式思路

vue響應式系統的基本原理

我們使用vue時，對資料進行操作，就能影響對應的檢視。那麼這種機制是怎麼實現的呢？

思考一下，是不是就好像我們對資料的操作 被“某人”監視了？一旦我們對資料進行了更改，“某人”就能感應到，並幫我們更新檢視

那麼這個“某人”到底是誰呢？其實它很普通，就是我們基礎裡面有學過的Object.defineProperty，使用它來對資料進行一下加工，就能實現當資料被http://www.cppcns.com

讀時，執行“讀”的回撥函式；資料被寫時，執行“寫”的回撥函式。

接下來，我們將簡單回顧該方法的使用，再用幾個實戰小例子帶大家徹底弄懂這個原理。

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

引數解釋：

	obj: 目標物件
	prop: 需要操作的目標物件的屬性名
	descriptor: 描述符
	
	return value 傳入物件

descriptor的一些屬性，簡單介紹幾個屬性。

	enumerable，屬性是否可列舉，預設 falwww.cppcns.comse。
	configurable，屬性是否可以被修改或者刪除，預設 false。
	writable，屬性是否可以被修改，預設false
	get，獲取屬性的方法。
	set，設定屬性的方法。

完整用法：

	Object.defineProperty(obj,prop,descriptor)

2.實戰1：使用 Object.defineProperty 對 person的age屬性 進行http://www.cppcns.com監聽

踩坑

看下面程式碼，乍一看是不是感覺沒什麼不妥？

當有人讀取person的age屬性時，我就把person的age屬性return出去；當有人修改person的age屬性，我就直接修改person.age的值。

但是！同學們，運行了一下，雖然沒報錯，但是編譯器一直瘋狂輸出“@@有人讀取了age屬性”。

這是為啥呢？你想想，你在get函式裡面直接return person.age，這算不算又一次讀取了person的age屬性呢？此時程式又去執行age的get函式，反反覆覆。

打個比方哈，相當於 你想讀取age，於是你告訴編譯器，我要輸出person.age，好的，編譯器去查person.age，發現它有get函式，於是執行get函式，此時你以為你要拿到它的值了，沒想到get函式裡面又告訴編譯器，我要person.age。這樣的話，就形成了死迴圈！！

那要怎麼解決呢？我在get裡面不能直接返回 person.age，那我要怎麼拿到這個屬性的值呢？

答：是不是可以用變數來替代呢？

我把person.age的值放在變數ageNumber中，我要讀的時候，就返回ageNumber的值；要修改的時候，就修改ageNumber的值；

這樣不就避免了在get，set函式裡面直接用person.age來訪問嗎？

正確程式碼

這時，效果就完成了，讀取和修改的時候，都能被監聽到。

3.資料代理

資料代理是什麼意思呢？

答：簡單解釋一下，就是通過一個物件 代理 對另一個物件中屬性的操作 (讀/寫)

有點抽象對嗎？用下面的小例子來解釋一下吧。

當老師想檢視 或者 修改學生的成績時，直接在老師這個物件上操作就行了，不需要直接去操作student物件。

這也就是上面想解釋的，通過 老師物件(teacher) 代理 了學生物件(student)中的成績屬性(score)的操作 (讀/寫)

4.vue中實現響應式思路

有一點vue2基礎的同學們應該知道，我們在vue中data() {} 中定義的資料，是不是都會被掛載到vm物件上去？然後我們是通過 this.資料名 來對資料進行操作的，對嗎？

那這個是不是就相當於上面的小例子中的情景呢，這裡是vm物件   代理   你定義的data物件中的屬性的操作（讀/寫）

再用個例子完整實現一下vue的響應式原理

把data物件中的所有屬性 交給 vm物件進行代理（讓vm 掌控data物件中的屬性的 (讀/寫) 操作 ）當資料變化時，能更新對應檢視

總結

1.Vue中的資料代理：

通過vm物件來代理data物件中屬性的操作（讀/寫）

2.Vue中資料代理的好處：

更加方便的操作data中的資料

3.基本原理：

通過Object.defineProperty()把data物件中所有屬性新增到vm上。

為每一個新增到vm上的屬性，都指定一個getter/setter。

在getter/setter內部去操作（讀/寫）data中對應的屬性。

4.vue中實現響應式思路

不使用資料代理，直接把資料 賦值 掛載到vm上。

1.下圖的方法是對 資料物件設定get，set的通用方法

2.在new一個Vue時，就會直接把使用者傳入的data物件，http://www.cppcns.com掛載到Vue例項身上

再對Vue例項上面的data物件進行監視（響應式處理）

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!