對 MVVM 模式的理解

MVVM 模式即 Model-View-ViewModel 模式

Model 層

數據層。它僅僅關注數據本身,不關心任何行爲

View 層

視圖層。view 層可以說是一個動態模板,它定義了頁面的結構和佈局,展示了 viewModel 層提供的數據

viewModel層

MVVM 模式的核心,用於同步 View 層和 Model 層的一個對象。View 層和 Model 層之間並沒有直接的聯繫,他們之間的交互是通過 ViewModel 來進行的,可以說 viewModel 是 view 層和 Moedl 層之間的橋樑

MVVM 模式的優點:

1,分離了數據層和視圖層,降低了代碼耦合

2,利用雙向綁定,自動更新 DOM

在不同的框架當中,MVVM 實現的原理是不同的:

髒檢查機制

Angular 就是採取的髒檢查機制,當發生了某種事件(例如輸入),Angular 會檢查新的數據結構和之前的數據結構是否發生來變動,來決定是否更新視圖。

數據劫持

Vue 採用數據劫持 & 發佈-訂閱模式的方式,通過 ES5 提供的 Object.defineProperty() 方法來劫持(監控)各屬性的 getter、setter,並在數據(對象)發生變動時通知訂閱者,觸發相應的監聽回調。並且,由於是在不同的數據上觸發同步,可以精確的將變更發送給綁定的視圖,而不是對所有的數據都執行一次檢測。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章