Vue-概念理解

更多詳細內容，能夠查看原文連接： Vue-概念理解

• 漸進式框架

  • 組件系統
  • 客戶端路由
  • 狀態管理
  • 構建工具
• 虛擬DOM
• MVVM模式
• MVX模式是什麼

漸進式框架

Vue.js是一套構建用戶界面的漸進式框架。

聲明式渲染和組件系統是Vue的核心庫所包含內容，而客戶端路由、狀態管理、構建工具都有專門解決方案。

聲明式渲染

全部的邏輯儘量在狀態的層面去進行，當狀態改變的時候，View應該是在框架幫助下自動更新到合理的狀態。

在Vue2.0中，渲染層的實現作了根本性改動，那就是引入了虛擬DOM。

Vue的編譯器在編譯模板以後，會把這些模板編譯成一個渲染函數 。而函數被調用的時候就會渲染而且返回一個虛擬DOM的樹 。

當咱們有了這個虛擬的樹以後，再交給一個patch函數，負責把這些虛擬DOM真正施加到真實的DOM上 。在這個過程當中，Vue有自身的響應式系統來偵測在渲染過程當中所依賴到的數據來源。在渲染過程當中，偵測到的數據來源以後，以後就能夠精確感知數據源的變更。到時候就能夠根據須要從新進行渲染。當從新進行渲染以後，會生成一個新的樹，將新樹與舊樹進行對比，就能夠最終得出應施加到真實DOM上的改動。最後再經過patch函數施加改動。

在Vue2.0的路由和內部的一些實踐上，都大量地應用渲染函數作複雜的抽象組件 ，好比過渡動畫組件以及路由裏面的link組件，都是用渲染函數實現的，同時還保留了它自己的依賴追蹤系統。

Vue的依賴追蹤經過ES5的 Object.defineProperty 方法實現。好比，咱們給它一個原生對象，Vue會遍歷這個數據對象的屬性，而後進行屬性轉換。每個屬性會被轉換爲一個 getter 和一個 setter。同時每一個組件會有一個對應的 watcher 對象，這個對象的職責就是在當前組件被渲染的時候，記錄數據上面的哪些屬性被用到了。

例如，在渲染函數裏面用到A.B的時候，這個就會觸發對應的 getter。整個渲染流程具體要點以下：

• 當某個數據屬性被用到時，觸發 getter，這個屬性就會被做爲依賴被 watcher 記錄下來。
• 整個函數被渲染完的時候，每個被用到的數據屬性都會被記錄。
• 相應的數據變更時，例如給它一個新的值，就會觸發 setter，通知數據對象對應數據有變化。
• 此時會通知對應的組件，其數據依賴有所改動，須要從新渲染。
• 對應的組件再次調動渲染函數，生成 Virtual DOM，實現 DOM 更新。

組件系統

在Vue中，父子組件之間的通訊是經過 props 傳遞。從父向子單向傳遞；而若是子組件想要在父組件做用裏面產生反作用，就須要去派發事件。這樣就造成一個基本的父子通訊模式。

客戶端路由

有一個重要的功能叫作 deep-linking，也就是當用戶瀏覽到一個URL，而後把它傳給另外的人或者複製從新打開，應用須要直接渲染出這個URL對應的狀態。這就意味着應用的URL和組件樹的狀態之間有一個映射關係，客戶端路由的職責就是讓這個映射關係聲明式地對應起來。

配合Webpack還能夠實現基於路由的懶加載，一條路徑所對應的組件在打包的時候，會分離成另一塊，只有當該路由被訪問的時候，纔會被加載出來。

狀態管理

圖中的這三個東西是一個單向數據流，State 驅動 View 的渲染，而用戶對 View 進行操做產生 Action，會使State產生變化，從而致使 View 從新渲染。

構建工具

npm install -g vue-cli
vue init webpack-simple my-app
cd my-app
npm install 
npm run dev

虛擬DOM

利用在內存中生成與真實DOM與之對應的數據結構，這個在內存中生成的結構稱之爲虛擬DOM。

MVVM模式

Vue.js 是一個提供了 MVVM 風格的雙向數據綁定的 Javascript 庫，專一於 View 層。它的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel負責鏈接 View 和 Model，保證視圖和數據的一致性，這種輕量級的架構讓前端開發更加高效、便捷。

Vue 雙向綁定原理

Vue.js 是採用 Object.defineProperty 的 getter 和 setter，並結合觀察者模式來實現數據綁定的。當把一個普通 Javascript 對象傳給 Vue 實例來做爲它的 data 選項時，Vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter。用戶看不到 getter/setter，可是在內部它們讓 Vue 追蹤依賴，在屬性被訪問和修改時通知變化。

Observer 數據監聽器，可以對數據對象的全部屬性進行監聽，若有變更可拿到最新值並通知訂閱者，內部採用 Object.defineProperty的 getter和 setter來實現。
Compile 指令解析器，它的做用對每一個元素節點的指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的更新函數。
Watcher 訂閱者， 做爲鏈接 Observer 和 Compile 的橋樑，可以訂閱並收到每一個屬性變更的通知，執行指令綁定的相應回調函數。
Dep 消息訂閱器，內部維護了一個數組，用來收集訂閱者（ Watcher），數據變更觸發 notify 函數，再調用訂閱者的 update 方法。

當執行 new Vue() 時，Vue 就進入了初始化階段，一方面 Vue 會遍歷 data 選項中的屬性，並用 Object.defineProperty 將它們轉爲 getter/setter，實現數據變化監聽功能；另外一方面，Vue 的指令編譯器 Compile 對元素節點的指令進行掃描和解析，初始化視圖，並訂閱 Watcher 來更新視圖， 此時 Wather 會將本身添加到消息訂閱器中(Dep),初始化完畢。

當數據發生變化時，Observer 中的 setter 方法被觸發，setter 會當即調用 Dep.notify()，Dep 開始遍歷全部的訂閱者，並調用訂閱者的 update 方法，訂閱者收到通知後對視圖進行相應的更新。

MVX模式是什麼

MVC