潛入理解MVVM＆Vue

noopyxu發表於2018-03-21
MVVMVue

關於MVVM

MVC

MVC即為Model + View + Controller的一種軟體架構。View為前端檢視，和使用者直接打交道的；Model是資料模型，可以理解為資料庫持久化儲存；Controller即為連線Model和View之間的業務邏輯控制器。

  • 當使用者在View檢視頁面修改了資料，通過Controller控制器完成對Model物件的更新、修改。
  • 使用者請求某url，也是通過Controller訪問資料的
  • 整個流程可以這麼理解：View前端介面更新-Controller控制器處理-更新Model資料-資料更新後通過Controller返回View-View頁面中體現出更新

MVVM

當前端業務邏輯不斷擴大···前端資料、業務更加複雜的時候，DOM操作肯定會增加如果按照以前的方式直接操作DOM效能會差。於是前端大佬們將資料Model與頁面View分離，當資料更新的時候DOM自動更新，如果頁面有更新Model也要同步更新，MVVM模式應運而生。在學習軟體工程的時候，我們知道要降低耦合，將Model、View分離也是在解耦操作。

MVVM = Model + View + ViewModel

MVVM

MVVM做的是將View與Model之間聯絡徹底剝離，任何資料同步都交由ViewModel處理。對檢視的修改以及資料的更新都通過ViewModel實現同步。

Vue雙向繫結的原理（Vue不支援IE8的原因）

何為雙向繫結

  • 檢視更新會同步更新Model
  • 同時Model更新也會在檢視上同步

雙向繫結的原理

vue雙向繫結

  • Observer監聽資料，資料有更新的話會通知訂閱者Watcher
  • Compile指令解析，編譯指令，更新檢視
  • Watcher訂閱並收到每個屬性變化的通知，執行相關回撥函式，更新檢視

Vue的生命週期

  • beforeCreate：例項初始化之後，在資料監聽以及編譯模板之前
  • created：例項化完成，資料監聽已繫結，DOM還未生成，$el不存在
  • beforeMounted：編譯模板，$el存在（render首次呼叫），但頁面沒有內容（尚未掛載）
  • mounted：將編譯好的HTML替換掉el指向的DOM，掛載完成，頁面中有內容了
  • beforeUpdate：監控到資料變化，元件更新之前；（資料更新了，但是虛擬DOM還沒重新渲染）
  • updated：元件更新之後；（虛擬DOM已經重新渲染&打補丁）
  • beforeDestory：例項銷燬之前
  • destoryed：例項銷燬完成
  • activated：keep-alive元件啟用時呼叫
  • deactivated：keep-alive元件停用時呼叫

Vue中的Virtual DOM（虛擬DOM）

前面說到採用MVVM可以實現雙向繫結，減少資料更新頻繁時，DOM隨之頻繁操作的問題。可是當資料更新時，檢視的渲染依然需要更新DOM樹。DOM非常非常大，如果直接對DOM進行處理效能可能會受影響，於是聰明的FEer想到採用js物件模擬DOM樹，也就是虛擬DOM。

當然如果每次檢視更新都要渲染整棵DOM樹工作量依然很大。於是乎，每次渲染之前對新舊兩棵樹進行對比diff()。差異更新到相應的位置。

對Vue元件的理解

元件，我們可以為是一個自定義、可複用的程式碼段，都有其特定功能。Vue元件也是Vue例項，如header、footer。而且，元件間是可以通訊的。

單檔案元件

單檔案元件就是一個vue檔案就是一個元件，一個檔案可以匯出一個元件。

元件中data必須是函式

data為函式，不同地方使用這個元件時，可以讓這個資料私有。

// 如果data不是函式
let component1 = new MyComponent()
let component2 = new MyComponent()

component1.data.title = '123'
// 此時component2的data的title屬性也會跟著變化
// 所以兩個例項的data必須有自己的域
複製程式碼

元件間通訊

父子元件間通訊

  • props傳遞資料，v-on,emit監聽/觸發自定義事件響應

爺孫元件件通訊

  • 兩次父子間元件通訊

兄弟元件通訊

  • new Vue()作為EventBus，一個負責$emit觸發事件，另一個$on監聽事件響應。

更復雜的情況：Vuex

Computed計算屬性和Methods和監聽屬性Watch的區別

Computed實現原理：無論是屬性還是計算屬性都會對應生成一個watcher例項。所以，當其依賴更新時，計算屬性會隨之更新。

  • Computed 是有快取的，如果依賴的資料未變化則不會更新
  • Methods 每次呼叫才會進行計算
  • Watch 監聽屬性變化，會有相應的處理

如何理解微信小程式

  • 微信小程式採用了特殊的標記語言（WXML、WXSS）
  • runtime不同，瀏覽器這個runtime下是作業系統；小程式這個runtime下是微信
  • 小程式最主要的目的還是做入口，技術不是其價值所在

相關文章