什麼是vue.js

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。

Vue.js 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。

什麼是漸進式框架

使用vue，你可以在原有大系統的上面，把一兩個元件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用； 還可以用它的檢視，搭配你自己設計的整個下層用。你可以在底層資料邏輯的地方用OO和設計模式的那套理念。 也可以函式式，都可以。它只是個輕量檢視而已，只做了自己該做的事，沒有做不該做的事，僅此而已。你不必一開始就用Vue所有的全家桶，根據場景，官方提供了方便的框架供你使用。

使用歷程：

form表單驗證==》整個頁面的dom 用Vue 來管理（用資料驅動DOM的變化）==》webpack vue-router控制路由，用於一整套前端開發的工程的構建==》熟悉元件之間的交流來處理資料交流和後端介面==》大型專案

從最初的只因多看你一眼而用了前端js庫，一直到最後的大型專案決方案。

如上圖，從起步開始一步一步向前，這就是所謂的漸進式。

下面還是具體來介紹一下vue.js的優缺點：

優點

（1）雙向資料繫結 也就是所謂的響應式資料繫結。這裡的響應式不是@media 媒體查詢中的響應式佈局，而是指vue.js會自動對頁面中某些資料的變化做出同步的響應。

也就是說，vue.js會自動響應資料的變化情況，並且根據使用者在程式碼中預先寫好的繫結關係，對所有繫結在一起的資料和檢視內容都進行修改。而這種繫結關係，就是以input 標籤的v-model屬性來宣告的，因此你在別的地方可能也會看到有人粗略的稱vue.js為宣告式渲染的模版引擎。

（2）元件化開發

在前端應用，我們是否也可以像程式設計一樣把模組封裝呢？這就引入了元件化開發的思想。

Vue.js通過元件，把一個單頁應用中的各種模組拆分到一個一個單獨的元件（component）中，我們只要先在父級應用中寫好各種元件標籤（佔坑），並且在元件標籤中寫好要傳入元件的引數（就像給函式傳入引數一樣，這個引數叫做元件的屬性），然後再分別寫好各種元件的實現（填坑），然後整個應用就算做完了。

（3）Virtual DOM

現在的網速越來越快了，很多人家裡都是幾十甚至上百M的光纖，手機也是4G起步了，按道理一個網頁才幾百K，而且瀏覽器本身還會快取很多資原始檔，那麼幾十M的光纖為什麼開啟一個之前已經開啟過，已經有快取的頁面還是感覺很慢呢？這就是因為瀏覽器本身處理DOM也是有效能瓶頸的，尤其是在傳統開發中，用JQuery或者原生的JavaScript DOM操作函式對DOM進行頻繁操作的時候，瀏覽器要不停的渲染新的DOM樹，導致頁面看起來非常卡頓。

而Virtual DOM則是虛擬DOM的英文，簡單來說，他就是一種可以預先通過JavaScript進行各種計算，把最終的DOM操作計算出來並優化，由於這個DOM操作屬於預處理操作，並沒有真實的操作DOM，所以叫做虛擬DOM。最後在計算完畢才真正將DOM操作提交，將DOM操作變化反映到DOM樹上。

（4）輕量高效

Vue.js通過簡潔的API提供高效的資料繫結和靈活的元件系統

其他優點：

（1）動畫系統

Vue.js提供了簡單卻強大的動畫系統，當一個元素的可見性變化時，使用者不僅可以很簡單地定義對應的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函式進行更底層的動畫處理。