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,並在數據(對象)發生變動時通知訂閱者,觸發相應的監聽回調。並且,由於是在不同的數據上觸發同步,可以精確的將變更發送給綁定的視圖,而不是對所有的數據都執行一次檢測。