vue框架（爲何要是用Vue，好處是什麼）

一、什麼是Vue.js

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

二、Vue.js的優勢

• 體積小：壓縮後只有33k；
• 更高的運行效率：基於虛擬DOM，一種能夠預先經過JavaScript進行各類計算，把最終的DOM操做計算出來並優化的技術，因爲這種DOM操做屬於預處理操做，並無真實的操做DOM，因此叫作虛擬DOM；
• 雙向數據綁定：讓開發者不用再去操做DOM對象，把更多的精力投入到業務邏輯上；
• 生態豐富、學習成本低：市場上擁有大量成熟、穩定的基於vue.js的ui框架及組件，拿來即用實現快速開發；對初學者友好、入門容易、學習資料多；

三、爲何要使用Vue.js

隨着前端技術的不斷髮展，前端開發可以處理的業務愈來愈多，網頁也變得愈來愈強大和動態化，這些進步都離不開JavaScript。在目前的開發中，已經把不少服務端的代碼放到了瀏覽器中來執行，這就產生了成千上萬行的JavaScript代碼，他們鏈接着各式各樣的HTML和CSS文件，可是缺少正規的組織形式。這也是爲何愈來愈多的前端開發者使用JavaScript框架的緣由，目前比較流行的前端框架有Angular、Reac、Vue等。

Vue是一款友好的、多用途且高性能的JavaScript框架，它可以幫助你建立可維護性和可測試性更強的代碼庫。Vue是漸進式的JavaScript框架，也就是說，若是你已經有了現成的服務端應用，你能夠將Vue做爲該應用的一部分嵌入其中，帶來更加豐富的交互體驗。或者若是你但願將更多業務邏輯放到前端來實現，那麼Vue的核心庫及其生態系統也能夠知足你的各式需求。

和其餘框架同樣，Vue容許你將一個網頁分割成可複用的組件，每一個組件都包含屬於本身的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方。若是咱們構建了一個大型的應用，可能須要將東西分割成爲各自的組件和文件，使用Vue的命令行工具，使快速初始化一個真實的工程變得很是簡單。

vue init webpack my-project 

咱們甚至可使用Vue的單文件組件，它包含了各自的HTML、JavaScript以及帶做用域的CSS或SCSS。

四、MVC、MVP、MVVM 設計模式

MVC（Model-View-Controller）是最多見的軟件架構之一，在軟件開發領域有着普遍的應用，MVC自己是比較好理解的，可是要講清楚由它衍生出來的MVP和MVVM就不太容易了。

4.一、MVC

MVC的意思是，能夠將軟件分爲三個部分：

• 視圖（View）：用戶界面
• 控制器（Controller）：業務邏輯
• 模型（Model）：數據保存

各部分之間的通訊方式爲：

• View傳送指令到Controller
• Controller完成業務邏輯後，要求Model改變狀態
• Model將新的數據發送到View，用戶獲得反饋

而且全部的通訊都是單向的，以下圖所示：

MVC 模式的執行流程是有兩種方式：

（1）經過View接受指令，傳遞給Controller

（2）直接經過Controller接受指令

實際項目中每每採用更加靈活的方式：

（1）用戶能夠向View發送指令（DOM事件），再由View直接要求Model改變狀態；

（2）用戶也能夠直接向Controller發送指令（改變URL觸發hashChange事件），再由Controller發送給view ;

（3）Controller很是薄，只起到路由的做用，而View很是厚，業務邏輯都部署在View，因此有些框架裏就直接取消了Controller，只保留一個Router（路由器）。

如圖所示：

4.二、MVP

MVP（Model-View-Presenter），是從經典的MVC演變而來的。Mode提供數據，View負責顯示，Presenter負責邏輯的處理。

MVP和MVC有着一個重大的區別：

• 在MVP中View與Model不發生聯繫，它們之間的通訊是經過Presenter來進行的，全部的交互都發生在Presenter（即MVC中的Controller）內部；而在MVC中View會直接從Model中讀取數據而不是經過Controller。
• MVP中各部分之間的通訊是雙向的，而在MVC中各部分之間的通訊是單向的。
• 在MVP中，View很是薄，不部署任何業務邏輯，稱爲「被動視圖」（Passive View），即沒有任何主動性，而Presenter很是厚，全部邏輯都部署在那裏。

如圖所示：

4.三、MVVM

MVVM（Model-View-ViewModel），它本質上是MVC的改進版，是針對MVC中的View進行了更細緻的分工。ViewModel將視圖UI和業務邏輯分開，它能夠取出Model的數據，同時幫助處理View中因爲須要展現內容而設計到的業務邏輯。

MVVM模式與MVP模式相似，惟一的區別是，它採用了數據雙向綁定（data-binding），即View的變更自動反應在ViewModel，反之亦然。

五、數據驅動（雙向數據綁定）的原理

什麼是數據驅動

數據驅動是Vue.js最大的特色。在vue中，所謂的數據驅動就是當數據發生變化時，用戶界面發生相應的變化，開發者不須要手動的去修改DOM。

好比，咱們點擊一個button，須要元素的文本作一個 「是/否」 的切換操做，在傳統的jQuery中，對於頁面修改的流程一般是：對button綁定事件，而後獲取文案對應元素的dom對象，最後根據切換來修改dom對象的文本值。

Vue實現數據驅動

vue實現數據雙向綁定主要採用數據劫持，配合發佈者-訂閱者模式的方式，經過 Object.defineProperty() 來劫持各個屬性的 setter 和 getter ，在數據變更時發佈消息給訂閱者，觸發相應監聽回調。

當一個普通 JavaScript 對象傳給 Vue 實例來做爲它的 data 選項時，vue 將遍歷它的屬性，用 Object.defineProperty 將它們轉爲 getter/setter 。用戶看不到 getter/setter ，可是在內部它們讓vue追蹤依賴，在屬性被訪問和修改時通知變化。

vue的數據雙向綁定將MVVM做爲數據綁定的入口，整合Observer、Compile和Watcher三者，經過Observer來監聽本身的Model的數據變化，經過Compile來解析編譯模板指令（vue中用來解析{{}}模板語法），最終利用Watcher搭起Observer和Compile之間的通訊橋樑，達到 數據變化 —> 視圖更新；視圖交互變化（input）—> 數據model變動 雙向綁定效果。

 

getter和setter的理解

當打印出vue實例下的data對象裏的屬性，它的每一個屬性都有兩個對應的get和set方法。顧名思義，get爲取值方法，set爲賦值方法。正常狀況下，取值和賦值是用 obj.prop 的方式，可是這樣作有一個問題，咱們如何知道對象的值改變了？

咱們能夠把get和set理解爲function，當咱們調用對象的屬性時，會進入到 get.屬性(){...} 中，先判斷對象是否有這個屬性，若是沒有，那麼就添加一個name屬性，並給它賦值；若是有name屬性，那麼就返回name屬性。能夠把get當作一個取值的函數，函數的返回值就是它拿到的值。

當給實例賦值時，會進入 set.屬性(val){...} 中，形參val就是賦給屬性的值，在這個函數裏作了不少事情，好比雙向綁定等等。由於這個值每次都要通過set，其餘方式沒法對該值作修改。在ES5中，對象原型有兩個屬性，_defineGetter_ 和 _defineSetter_ ，專門用來給對象綁定get和set。

六、虛擬DOM

6.1 什麼是虛擬DOM

在Vue.js 2.0版本中引入了 Virtual DOM 的概念，Virtual DOM 其實就是一個以JavaScript對象（VNode節點）做爲基礎來模擬DOM結構的樹形結構，這個樹形結構包含了整個DOM結構的信息。簡單來講，能夠把Virtual DOM理解爲一個簡單的JS對象，而且最少包含標籤名（tag）、屬性（attrs）和子元素對象（children）三個屬性。不一樣的框架對這三個屬性的命名會有所差異。

 

6.2 虛擬DOM的做用

虛擬DOM的最終目標是將虛擬節點渲染到視圖上。可是若是直接使用虛擬節點覆蓋舊節點的話，會有不少沒必要要的DOM操做。例如，一個ul標籤下有不少個li標籤，其中只有一個li標籤有變化，這種狀況下若是使用新的ul去替代舊的ul，會由於這些沒必要要的DOM操做而形成性能上的浪費。

爲了不沒必要要的DOM操做，虛擬DOM在虛擬節點映射到視圖的過程當中，將虛擬節點與上一次渲染視圖所使用的舊虛擬節點作對比，找出真正須要更新的節點來進行DOM操做，從而避免操做其餘不須要改動的DOM元素。

其實，虛擬DOM在Vue.js中主要作了兩件事情：

• 提供與真實DOM節點所對應的虛擬節點VNode
• 將虛擬節點VNode和舊虛擬節點oldVNode進行對比，而後更新視圖

6.3 爲何要使用虛擬DOM

• 具有跨平臺優點，因爲Virtual DOM 是以JavaScript對象爲基礎而不依賴真實平臺環境，因此使它具備了跨平臺的能力，好比說瀏覽器平臺、Weex、Node等。
• 操做DOM慢，JS運行效率高，能夠將DOM對比操做放在JS層，提升效率。由於DOM操做的執行速度遠不如JavaScript運算速度快，所以，把大量的DOM操做搬運到JavaScript中，運用patching算法來計算出真正須要更新的節點，最大限度地減小DOM操做，從而顯著提升性能。Vritual DOM本質上就是在JS和DOM之間作了一個緩存，JS只操做Virtual DOM，最後把變動寫入到真實DOM。
• 提升渲染性能，Virtual DOM的優點不在於單次的操做，而是在大量、頻繁的數據更新下，可以對視圖進行合理、高效的更新。