簡介：

   1.Vue.js是用於構建互動式的 Web 介面的庫

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

   3.Vue.js是一款輕量級的、以資料驅動構建web介面的前端JS框架,它在架構設計上採用了MVVM（Model-View-ViewModel）模式,其中ViewModel是Vue.js的核心,它是一個Vue的例項,而這個例項又作用域頁面上的某個HTML元素.其核心在於通過資料驅動介面的更新和展示而非JS中通過操作DOM來改變頁面的顯示.

那麼什麼是MVVM呢。

MVVM由Model,View,ViewModel三部分構成：

M：Model層代表資料模型，也可以在Model中定義資料修改和操作的業務邏輯

V：View代表UI元件，它負責將資料模型轉化成UI展現出來，也就是值DOM層或使用者介面

VM：ViewModel是一個同步Vuew和Model的物件，用於處理資料和介面的中間層

在MVVM架構下，View 和 Model 之間並沒有直接的聯絡，而是通過ViewModel進行互動。Model 和 ViewModel 之間的互動是雙向的， 因此View 資料的變化會同步到Model中，而Model 資料的變化也會立即反應到View 上。

ViewModel 通過雙向資料繫結把 View 層和 Model 層連線了起來，而View 和 Model 之間的同步工作完全是自動的，無需人為干涉，因此開發者只需關注業務邏輯，不需要手動操作DOM, 不需要關注資料狀態的同步問題，複雜的資料狀態維護完全由 MVVM 來統一管理。

什麼是漸進式框架

  有人是這麼理解的：
  漸進式代表的含義是：主張最少。每個框架都不可避免會有自己的一些特點，從而會對使用者有一定的要求，這些要求就是主張，主張有強有弱，它的強勢程度會影響在業務開發中的使用方式。
  我個人理解漸進式就是階梯式向前。
  漸進式就是指我們可以由淺入深、由簡單到複雜的方式去使用Vue.js。“Progressive（漸進式的）”——這個詞在英文中定義是漸進，一步一步，不是說你必須一竿子把所有的東西都用上。

  就像是搭積木，我們可以根據需求，利用社群良好的生態，藉助已有的工具和庫搭建我們的專案，用最小、最快的成本一步步搭建。

Vue,js優點

   1.體積小（壓縮只有33k）

   2.更高的執行效率（基於虛擬DOM, 一種可以預選通過JavaScript進行各種計算, 把最終的DOM操作計算出來並優化的技術，由於中國DOM操作屬於預處理操作， 並沒有真正地操作DOM， 所以叫虛擬DOM。）

   3.雙向資料繫結（讓開發者不用再去操作DOM物件, 把更多的精力投入到業務邏輯上。）

   4.生態豐富，學習成本低（大量的基於Vue.js開源框架，元件，易學.）

Vue.js核心思想

ViewModel中有：DOM Listeners（監聽） 和 Directives（指令）
View 對應的 DOM物件。
ViewModel是一個很好的設計，如果沒有ViewModel，那麼我們在View和Model之間的驅動是由手動觸發DOM改變，是一個很繁瑣的過程，而且容易出錯，如果我們使用了ViewModel之後，就省略了手動操作的步驟了，在Vue.js裡面，我們我們只需要改變資料，Vue.js只需通過Directives指令去對DOM做一層封裝，當資料發生變化，就會通知指令去修改DOM,資料是DOM的一種自然對映。Vue.js還會對操作做一層監聽，當我們修改檢視的時候，Vue.js會監聽這些變化，從而改變Model。從而實現了雙向繫結。

通過資料驅動介面更新, 無需操作DOM來更新介面。使用Vue我們只需要關心如何獲取資料, 如何處理資料, 如何編寫業務邏輯程式碼，我們只需要將處理好的資料交給Vue, Vue就會自動將資料渲染到模板中(介面上)。

vue.js是如何做到這一點？
資料響應原理：
資料（model）改變驅動檢視（view）自動更新。

元件化

目的：擴充套件HTML元素，封裝可重用程式碼。
元件化開發，我們可以將網頁拆分成一個個獨立的元件來編寫，將來再通過封裝好的元件拼接成一個完整的網頁。

左邊是我們的頁面，被拆分為很多小的區塊，每個區塊就對應一個元件，元件可以巢狀，最終組合形成一個完整的頁面。在vue.js中，每個元件都對應一個ViewModel（右邊的小塊）。最終我們生產了右邊的ViewModel的這個數狀結構，與我們左邊的DOM樹就是一一對應的關係。

元件的設計原則：
頁面上每個獨立的可視/可互動區域都被視為一個元件。

比如我們的頁面的頭部，尾部，以及一些可複用的區塊，都可以抽象成元件。
每個元件對應一個工程目錄，元件所需要的各個元件在這個目錄下就近維護。這個就提現了前端的工程化思想，為前端開發提供了很好的分支策略，每個開發者都清楚地知道自己所開發維護的功能單元，程式碼必然存在於自己的元件目錄中，在這個目錄中就可以清楚知道自己的功能的內部邏輯以及資源，樣式也好，js也好，頁面結構也好，都在裡面。在Vue.js中，可以通過.vue檔案把元件依賴的模板，js，和樣式都寫在一個檔案中，這個就把就近維護思想發揮到極致。

頁面不過是元件的容器，元件可以巢狀自由組合形成完整的頁面。

文章出處：https://segmentfault.com/a/1190000022556845