簡析mvvm框架

---

目前angular,reat和vue都是mvvm類型的框架

以vue為例

?

這里的vm?就是vue框架，它相當(dāng)于中間樞紐的作用,連接著model?和view.

• 當(dāng)前臺顯示的view發(fā)生變化了，它會實(shí)時反應(yīng)到viewModel上，如果有需要，viewModel?會通過ajax等方法將改變的數(shù)據(jù) 傳遞給后臺model
• 同時從后臺model獲取過來的數(shù)據(jù)，通過vm將值響應(yīng)到前臺UI上

?

• 雙向綁定原理

  ---

vm的核心是view 和 data?

• 當(dāng)data 有變化的時候它通過Object.defineProperty(）方法中的set方法進(jìn)行監(jiān)控，并調(diào)用在此之前已經(jīng)定義好data 和view的關(guān)系了的回調(diào)函數(shù)，來通知view進(jìn)行數(shù)據(jù)的改變
• 而view 發(fā)生改變則是通過底層的input 事件來進(jìn)行data的響應(yīng)更改

vue是通過Object.defineProperty()來實(shí)現(xiàn)數(shù)據(jù)劫持的。

Object.defineProperty( )是用來做什么的？它可以來控制一個對象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來研究下它對應(yīng)的兩個描述屬性get和set

varBook= {}varname=?'';Object.defineProperty(Book,?'name', {set:function(value) {name=?value;console.log('你取了一個書名叫做'+?value);},get:function() {return'《'+?name+?'》'}})console.log(Book)Book.name=?'vue權(quán)威指南';?//?你取了一個書名叫做vue權(quán)威指南console.log(Book.name);?//?《vue權(quán)威指南》// get?是在讀取那么屬性的時候觸發(fā)的// set?是在設(shè)置屬性值的時候觸發(fā)的

?

實(shí)現(xiàn)方法： 觀察者模式

Observer（Objec.defineProperty中的set）監(jiān)聽data的變化，當(dāng)data有變化的時候通知觀察者列表Dep（里面有與data變化對應(yīng)的update函數(shù)）,watcher負(fù)責(zé)向觀察者列表里添加（訂閱）對應(yīng)的更新函數(shù)，Dep里的更新函數(shù)執(zhí)行完了之后將最新的值更新到view上。

具體的代碼實(shí)現(xiàn)可參考：https://www.cnblogs.com/libin-1/p/6893712.html

?

總結(jié)

以上是生活随笔為你收集整理的浅谈vue双向绑定原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。