1. 什么是MVVM 不管是MVC,MVP,或者M(jìn)VVM,都是常見(jiàn)的軟件架構(gòu)設(shè)計(jì)模式(Architectural Pattern),它通過(guò)分離關(guān)注點(diǎn)來(lái)改進(jìn)代碼的組織方式。
不同于設(shè)計(jì)模式(Design Pattern),只是為了解決一類問(wèn)題而總結(jié)出的抽象方法,一種架構(gòu)模式往往使用了多種設(shè)計(jì)模式。
MVVM,可以拆分為Model-View-ViewModel來(lái)理解:
- Model - 數(shù)據(jù)模型,可以對(duì)應(yīng)到真實(shí)開發(fā)過(guò)程中的數(shù)據(jù)包
- View - 視圖層,布局和外觀,可以對(duì)應(yīng)到真實(shí)開發(fā)中的 DOM結(jié)構(gòu)
- ViewModel - 扮演“View”和“Model”之間的使者,幫忙處理 View 視圖層的全部業(yè)務(wù)邏輯
2. 為什么使用MVVM框架要回答這個(gè)問(wèn)題,我們需要對(duì)比一下,在使用MVVM框架之前,我們是如何完成前端交互的。
- 使用前,為了修改某個(gè)視圖節(jié)點(diǎn)中的內(nèi)容信息,我們需要頻繁人為操作DOM,效率低下 var dom = document.querySelector('div'); dom.innerHTML = '張三豐'; dom.style.color = 'red';
- 使用后,當(dāng)name數(shù)據(jù)發(fā)生變化的時(shí)候,視圖區(qū)域的name自定觸發(fā)更新,極大提高開發(fā)效率
{{name}}