十分鐘帶你瞭解Vue框架

Vue 框架誕生於2014年，其作者為中國人——尤雨溪。

Vue用於構建互動式的Web介面的庫，是一個構建資料驅動的Web介面漸進式框架，該框架遵循CMD規範，並且提供的設計模式為MVVM模式。

（Model-View-View-Model），和一個可組合的組合型元件系統，具有簡單的、靈活的API介面。

該框架繼承了React的虛擬DOM技術和Angular的雙向資料繫結技術，是一款較新的功能性框架。

那什麼是虛擬DOM和雙向資料繫結呢？

1、虛擬DOM：虛構的DOM樹，當我們用傳統的原生API或者jQuery去操作DOM時，瀏覽器會從構建DOM樹開始從頭到尾執行一遍流程。

為了解決瀏覽器效能問題，虛擬DOM就被設計出來了，其核心演算法是DIFF演算法。它會將一次操作過程中對真實DOM所有更新的diff內容儲存到本地的一個js物件中，等更新完成後，再將最終的js物件對映成真實的DOM，交由瀏覽器去繪製。，最終將這個js物件一次性attach到DOM樹上，通知瀏覽器去執行繪製工作，避免了大量的無謂的計算量。

用js物件模擬DOM節點的好處是：頁面的更新可以先全部反應在js物件上，操作記憶體中的js物件的速度要快很多。

2、雙向資料繫結：

單向資料繫結：把Model繫結到View上，當我們用Java程式碼更新Model時，View就會自動更新了。

那麼雙向資料繫結就是，不僅具有上面的單向轉換，而且使用者更新了View，Model的資料也會自動被更新（Model<——>View）。

那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專案開發過程中，我們可以透過標籤引入式寫法來引入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（）{}等鉤子函式；