設計模式(MVC/MVP/MVVM)
MVC(Model View Controller):
- 數據模型(Model):數據保存,代表數據模型,也可以在Model中定義數據修改和操作的業(yè)務邏輯
- 視圖(View):代表UI 組件,它負責將數據模型轉化成UI 展現(xiàn)出來。
- 控制器(Controller):業(yè)務邏輯
- MVC特點:
- 用戶可以向 View 發(fā)送指令(DOM 事件),再由 View 直接要求 Model 改變狀態(tài)。
- 用戶也可以直接向 Controller 發(fā)送指令,再由 Controller 發(fā)送給 View。
- Controller 非常薄,只起到路由的作用,而 View 非常厚,業(yè)務邏輯都部署在 View。
MVVM(Model-View-ViewModel )
- Model 代表數據模型,也可以在Model中定義數據修改和操作的業(yè)務邏輯。
- View 代表UI 組件,它負責將數據模型轉化成UI 展現(xiàn)出來。
- ViewModel 監(jiān)聽模型數據的改變和控制視圖行為、處理用戶交互,簡單理解就是一個同步View 和 Model的對象,連接Model和View。
- MVVM特點
在MVVM架構下,View 和 Model 之間并沒有直接的聯(lián)系,而是通過ViewModel進行交互,Model 和 ViewModel 之間的交互是雙向的, 因此View 數據的變化會同步到Model中,而Model 數據的變化也會立即反應到View 上。
ViewModel 通過雙向數據綁定把 View 層和 Model 層連接了起來,而View 和 Model 之間的同步工作完全是自動的,無需人為干涉,因此開發(fā)者只需關注業(yè)務邏輯,不需要手動操作DOM, 不需要關注數據狀態(tài)的同步問題,復雜的數據狀態(tài)維護完全由 MVVM 來統(tǒng)一管理。
Vue核心原理:
- Vue由數據驅動,Vue是一個提供了MVVM風格的雙向數據綁定的Javascript庫,專注于View 層。它讓開發(fā)者省去了操作DOM的過程,只需要改變數據即可。
- Vue實現(xiàn)數據雙向綁定,采用數據劫持結合發(fā)布者-訂閱者模式的方式,通過Object.defineProperty來劫持各個屬性的setter,getter,在數據變動時發(fā)布消息給訂閱者,觸發(fā)相應監(jiān)聽回調。
- 虛擬DOM,vue會建立虛擬dom樹,當被監(jiān)測的數據改變會通過Object.defineProperty定義的數據攔截,截取到數據的變化,從而通過發(fā)布訂閱者模式,觸發(fā)Watcher(觀察者),從而改變虛擬dom的具體數據,從而改變最后渲染的dom樹的值,完成雙向數據綁定