Vue.js是一個提供MVVM數據雙向綁定的庫，專註於UI層面，核心思想是：數據驅動、組件系統。

1.數據驅動：

Vue.js數據觀測原理在技術實現上，利用的是ES5Object.defineProperty和存儲器屬性: getter和setter（所以只兼容IE9及以上版本），可稱為基於依賴收集的觀測機制。核心是VM，即ViewModel，保證數據和視圖的一致性。

watcher：每一個指令都會有一個對應的用來觀測數據的對象，叫做watcher，比如v-text="msg", {{ msg }}，即為兩個watcher，watcher對象中包含了待渲染的關聯DOM元素。

1 <div id="app">
2   {{ message }}
3 </div>
4 var app = new Vue({
5   el: ‘#app‘,
6   data: {
7     message: ‘Hello Vue!‘
8   }
9 })

基於依賴收集的觀測機制原理：

1 將原生的數據改造成 “可觀察對象”，通常為，調用defineProperty改變data對象中數據為存儲器屬性。一個可觀察對象可以被取值getter，也可以被賦值setter。
2 在解析模板，也就是在watcher的求值過程中，每一個被取值的可觀察對象都會將當前的watcher註冊為自己的一個訂閱者，並成為當前watcher的一個依賴。
3 當一個被依賴的可觀察對象被賦值時，它會通知notify所有訂閱自己的watcher重新求值，並觸發相應的更新，即watcher對象中關聯的DOM改變渲染。 

依賴收集的優點在於可以精確、主動地追蹤數據的變化，不需要手動觸發或對作用域中所有watcher都求值（angular臟檢查實現方式的缺點）。特殊的是，對於數組，需要通過包裹數組的可變方法（比如push）來監聽數組的變化。在添加/刪除屬性，或是修改數組特定位置元素時，也需要調用特定的函數，如obj.$add(key, value)才能觸發更新。這是受ES5的語言特性所限。

2.組件化：

應用類UI可以看作全部是由組件樹構成的。

註冊一個組件：

 1 Vue.component(‘my-component‘, {
 2     // 模板
 3     template: ‘<div>{{msg}} {{privateMsg}}</div>‘,
 4     // 接受參數
 5     props: {
 6         msg: String    
 7     },
 8     // 私有數據，需要在函數中返回以避免多個實例共享一個對象
 9     data: function () {
10         return {
11             privateMsg: ‘component!‘
12         }
13     }
14 })
15 <my-component msg="hello"></my-component> 

組件的核心選項

1 模板（template）：模板聲明了數據和最終展現給用戶的DOM之間的映射關系。
2 初始數據（data）：一個組件的初始數據狀態。對於可復用的組件來說，這通常是私有的狀態。
3 接受的外部參數(props)：組件之間通過參數來進行數據的傳遞和共享。
4 方法（methods）：對數據的改動操作一般都在組件的方法內進行。
5 生命周期鉤子函數（lifecycle hooks）：一個組件會觸發多個生命周期鉤子函數，最新2.0版本對於生命周期函數名稱改動很大。
6 私有資源（assets）：Vue.js當中將用戶自定義的指令、過濾器、組件等統稱為資源。一個組件可以聲明自己的私有資源。私有資源只有該組件和它的子組件可以調用。

Webpack是一個開源的前端模塊構建工具，它提供了強大的loader API來定義對不同文件格式的預處理邏輯，這是.vue後綴單文件組件形式的基礎。所以在此基礎上，尤大開發的vue-loader允許將模板、樣式、邏輯三要素整合在同一個文件中，以.vue文件後綴形成單文件組件格式，方便項目架構和開發引用。

其他特性：

1 異步批量DOM更新：當大量數據變動時，所有受到影響的watcher會被推送到一個隊列中，並且每個watcher只會推進隊列一次。這個隊列會在進程的下一個 tick異步執行。這個機制可以避免同一個數據多次變動產生的多余DOM操作，也可以保證所有的DOM寫操作在一起執行，避免DOM讀寫切換可能導致的layout。
2 動畫系統：Vue.js提供了簡單卻強大的動畫系統，當一個元素的可見性變化時，用戶不僅可以很簡單地定義對應的CSS Transition或Animation效果，還可以利用豐富的JavaScript鉤子函數進行更底層的動畫處理。
3 可擴展性：除了自定義指令、過濾器和組件，Vue.js還提供了靈活的mixin機制，讓用戶可以在多個組件中復用共同的特性。

總結：

Vuejs學習曲線非常平緩，主要是文檔實在太優秀了，旁證了設計師出身的程序員有多可怕。其輕量、高性能的特點，對於移動場景也有很好的契合。更重要的是，設計完備的組件系統和配套的構建工具、插件，使得Vue.js在保留了其簡潔API的同時，也已經完全有能力擔當起復雜的大型應用的開發。

本人構建Vue WebApp技術棧：vuejs + vuex + vue-router + vue-resource + vux(UI庫) + webpack

以上

原文：https://www.cnblogs.com/liutie1030/p/6008869.html

淺談Vue.js2.0核心思想