• 構建用戶界面的漸進式框架
• 核心庫 只關注視圖層 （實現ViewModel）
• 復雜單頁應用 單文件組件 + Vue 生態系統

Vue.js 核心：采用簡潔的模板語法 來聲明式的將數據渲染進 DOM。

<div id="app">
    {{ msg }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        msg: 'Hello Vue.js!'
    }
})

數據驅動

MVVM 模型，數據雙向綁定
模型層(model)只是普通 JavaScript 對象，修改它則更新視圖(view)，狀態管理變得簡單直觀。

把一個普通 JavaScript 對象傳給 Vue 實例的 data 選項，Vue 將遍歷此對象所有的屬性，并使用 Object.defineProperty 把這些屬性全部轉為 getter/setter。（Object.defineProperty 是僅 ES5 支持，且無法 shim 的特性，支持IE9+）

每個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當依賴項的 setter 被調用時，會通知 watcher 重新計算，從而致使它關聯的組件得以更新。

• 不允許動態添加根級響應式屬性：在初始化實例前聲明根級響應式屬性
• 異步執行 DOM 更新：觀察到數據變化 將開啟一個隊列，緩沖同一事件循環中的所有改變

組件化

父子組件解耦 props down, events up

• 父組件通過 props 向下傳遞數據給子組件
• 子組件通過 events 給父組件發送消息

<template>
    <p>{{ greeting }} World!</p>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                greeting: 'Hello'
            }
        }
    }
</script>

<style scoped>
    p {
        font-size: 2em;
        text-align: center;
    }
</style>

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API請求
├── components
│   ├── App.vue
│   └── ...
├── router
│   ├── index.js
│   └── ...
└── store
    ├── index.js          # 組裝模塊并導出 store
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── modules
        ├── cart.js       # 購物車模塊
        └── products.js   # 產品模塊

Vuex

多個組件共享狀態時，單向數據流的簡潔性很容易被破壞：

• 多個視圖依賴于同一狀態
  • 傳參的方法對于多層嵌套的組件將會非常繁瑣
  • 對于兄弟組件間的狀態傳遞無能為力
• 來自不同視圖的行為需要變更同一狀態
  • 父子組件直接引用
  • 通過事件來變更和同步狀態的多份拷貝

• state，驅動應用的數據源
• view，以聲明方式將state映射到視圖
• actions，響應在view上的用戶輸入導致的狀態變化

Vue-Router

• hash 模式
• history 模式

將路由對應的組件定義成異步組件，實現路由懶加載。