前端三大框架之Vue框架詳細解析

伴隨著前端的發展，各類框架、各類插件接踵而來，在這裡我介紹下前端三大框架之一的Vue框架，以及基礎知識技術總結。

Vue框架誕生於2014年，其作者為中國人——尤雨溪，也是新人最容易入手的框架之一，不同於React和Angular,其中文文檔也便於大家閱讀和學習。Vue用於構建互動式的Web界面的庫，是一個構建數據驅動的Web界面漸進式框架，該框架遵循CMD規範，並且提供的設計模式為MVVM模式（Model->View->View-Model）和一個可組合的組合型組件系統，具有簡單的、靈活的API(介面)。該框架繼承了React的虛擬DOM技術和Angular的雙向數據綁定技術，是一款較新的功能性框架。

在這裡介紹下什麼是虛擬DOM和雙向數據綁定：

1、虛擬DOM（Virtual DOM），顧名思義，從字面上理解就是虛構的DOM樹，當我們用傳統的原生API或者jQuery去操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍流程。即使計算機硬體一直在更新迭代，但是操作真實DOM的代價仍舊很昂貴，真實的DOM節點，哪怕是一個最簡單的div也包含很多屬性，所以頻繁的操作，會導致頁面卡頓，影響用戶的體驗。為了解決這個瀏覽器性能問題，虛擬DOM（Virtual DOM）就被設計出來了，其核心演算法是Diff演算法。它會將一次操作過程中對真實DOM所有更新的diff內容保存到本地的一個js對象中，最終將這個js對象一次性attach到DOM樹上，通知瀏覽器去執行繪製工作，避免了大量的無謂的計算量。

用js對象模擬DOM節點的好處是：頁面的更新可以先全部反應在js對象上，操作內存中的js對象的速度明顯要快的多。等更新完成後，在將最終的js對象映射成真實的DOM，交由瀏覽器去繪製。（提高了性能，並且運行速度快）

2、雙向數據綁定，在講雙向數據綁定前，我們要想說下單向數據綁定，單向數據綁定，就是把Model綁定到View上，當我們用JavaScript代碼更新Model時，View就會自動更新了（Model-->View）。那麼雙向數據綁定就是，用戶更新了View，Model的數據也會自動被更新（ModelView）。什麼情況下用戶可以更新View呢？舉個最直接的例子，填寫表單，當用戶填寫表單時，View的狀態就被更新了，如果此時MVVM框架可以自動更新Model的狀態，那麼就相當於我們把Model和View做了雙向數據綁定。其原理是我們要對input進行value 的屬性綁定（v-bind：value=」...」）將Model中的變數綁定到View上（Model->View）以及當用戶對input進行操作時，進行事件監聽（v-on：input=」...」）將View上的更新傳回Model中（View->Model）從而實現雙向數據綁定，在Vue中，以上操作過於繁瑣，便提供了v-model直接實現雙向數據綁定的效果。

在進行Vue項目開發過程中，我們可以通過script標籤引入式寫法來引入vue或者是nodejs自帶的包管理工具npm安裝vue。並且通過new Vue（）進行新建一個Vue的實例對象，其下有很多屬性，包括el、data、methods、computed、watch等等，el為指向頁面的節點元素，data存儲數據，數據類型包括simple datatype（簡單數據類型）以及complex datatype（複雜數據類型），用插值表達式{{}}顯示，在插值顯示的時候，不需要寫上data，methods內存儲方法，通過fn（）的形式調用方法，computed內存儲也是方法，但是其為計算數據，複雜邏輯的應該存儲在computed中，計算屬性是基於它們的依賴進行緩存的，由於computed帶有一層緩存，所以只有在它的相關依賴發生改變時才會重新運行，而methods則是調用一次生成一次，computed中的方法調用時不需要加（）的，watch為監聽，監控，監聽data中的屬性值也可以監控對象，存在兩個參數（currentValue當前值和prevValue之前值）。

在Vue中，html的任何屬性都不能用{{}}（插值表達式）來進行設置，要用v-bind：來進行屬性綁定，v-bind：可以簡寫為 ：，當我們需要對事件進行監聽的時候需要用v-on：來進行事件綁定，v-on：可以簡寫為@，v-once單次渲染，v-html渲染html，在input、select、textarea中我們可以用v-model：進行雙向數據綁定，可以用v-for進行數據循環，v-if/v-else-if/v-else進行數據判斷，利用v-show顯示與隱藏DOM節點，在Vue中還存在很多修飾符如取消事件冒泡（.stop），回車鍵（.enter），空格鍵（.space），取消默認事件（.prevent）等等，可以對DOM設置ref屬性進行本地指向，類似於id，當我們對一個對象進行v-for循環時要對該對象設置key值，起到標識唯一性，便於檢測以及提高性能的作用。

在Vue的實例對象下面還存在很多鉤子函數，總體分為三大塊（創建、更新、銷毀）：

1、創建階段，存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等鉤子函數；

2、更新階段，存在beforeUpdate(){}、updated(){}等鉤子函數；

3、銷毀階段，存在beforeDestroy(){}、destroyed(){}等鉤子函數；上述鉤子函數不包括全部，一個生命周期內存在很多鉤子函數，不能一一列舉。

以上就是我對Vue基礎知識技術的總結，Vue項目開發部分留待Vue項目開發技術總結。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！