潛入理解MVVM＆Vue

關於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作的是將View與Model之間聯繫完全剝離，任何數據同步都交由ViewModel處理。對視圖的修改以及數據的更新都經過ViewModel實現同步。

Vue雙向綁定的原理（Vue不支持IE8的緣由）

何爲雙向綁定

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

雙向綁定的原理

• 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下是微信
• 小程序最主要的目的仍是作入口，技術不是其價值所在