先介紹下Vue，它是一套用於構建用戶界面的漸進式框架。與其他大型框架不同的是Vue被設計爲可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易於上手，還方便與第三方庫或既有項目整合。另一方面當與現代化的工具鏈以及各種支持類庫結合使用時，Vue也完全能夠爲複雜的單頁應用提供驅動。
Vue構建方式
有兩種構建方式，獨立構建和運行構建。他們的區別在於前者包含模板編譯器而後者不包含。
模板編譯器的職責是將模板字符串編譯爲純JacaScript的渲染函數。如果你想要在組件中使用template選項，你就需要編譯器。
聲明週期
具體要注意的是created和mounted區別，created是vm實例已創建但爲掛載，因此一些DOM操作應該放在mounted中。異步請求放在created或者mounted暫時沒有發現什麼區別。
計算（computed）屬性
模板內的表達式不應該包含太多的邏輯，對於任何複雜邏輯，都應當使用計算屬性，
Component屬性和methods不同的是計算屬性是基於他們的依賴進行緩存的。
Component屬性和mounted屬性，通常更好的想法是使用computed屬性而不是命令式watch回調。雖然計算屬性在大多數情況下更合適，但有時需要一個自定義的watcher。當你想要在市局變化響應時，執行異步操作或開銷較大的操作，這是很有用的。
對象更新
可以用新對象替換舊對象，或者使用Vue。Set方法
Vue.set(vm.somObject,'foo','bar')
this.someObject=Object.assign({},this.someObject,{a:1,b:2})
表單控件綁定
用v-model指定在表單控件元素上創建雙向數據綁定。
組件
Vue組件的API來自三部分：props,events和slots：
Props允許外部環境傳遞數據給組件
Events允許組件觸發外部環境的副作用
Slots允許外部環境將額外的內容組合在組件中。
組件的data屬性必須是函數
父子組價
在Vue.js中父子組件的關係可以總結爲props down，ecents up。父組件通過props向下傳遞數據給子組件，子組件通過events給父組件發送消息。
prop是單向綁定的：當父組件的屬性變化時，將傳導給子組件，但是不會反過來。這是爲了防止子組件無意修改了父組件的狀態——這會讓應用的數據流難以理解。
另外，每次父組件更新時，子組件的所有prop都會更新爲最新值。這意味着你不應該在子組件內部改變prop。如果你這麼做了，Vue會在控制檯給出警告。
爲什麼我們會有修改prop中數據的衝動呢？通常是這兩種原因：
1.prop作爲初始值傳入後，子組件想把它當作局部數據來用；
2.prop作爲初始值傳入，由子組件處理成其它數據輸出。
對這兩種原因，正確的應對方式是：
1.定義一個局部變量，並用prop的值初始化它：
props: ['initialCounter'],
data: function () {
return { counter: this.initialCounter }
}
2.定義一個計算屬性，處理prop的值並返回。
props: ['size'],computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
}
注意在JavaScript中對象和數組是引用類型，指向同一個內存空間，如果prop是一個對象或數組，在子組件內部改變它會影響父組件的狀態。
3）非父子組件
有時候兩個組件也需要通信(非父子關係)。在簡單的場景下，可以使用一個空的Vue實例作爲中央事件總線。在複雜的情況下，我們應該考慮使用專門的狀態管理模式。
4）.sync修飾符
在一些情況下，我們可能會需要對一個prop進行『雙向綁定』。
2.0中移除了.sync，Vue2.3.0+又將其添加回來了，但是這次它只是作爲一個編譯時的語法糖存在，它會被擴展爲一個自動更新父組件屬性的v-on偵聽器。如下代碼
<comp :foo.sync="bar"></comp>
會被擴展爲：
<comp :foo="bar" @update:foo="val => bar = val"></comp>
當子組件需要更新foo的值時，它需要顯式地觸發一個更新事件：
this.$emit('update:foo', newValue)
5）使用slot進行內容分發
作用域插槽：接收從子組件中傳遞的prop對象。作用域插槽更具代表性的用例是列表組件，允許組件自定義應該如何渲染列表每一項
6）動態組件、is特性和keep-alive指令
7）子組件索引
儘管有props和events，但是有時仍然需要JavaScript中直接訪問子組件。爲此可以使用ref爲子組件指定一個索引ID。
異步更新隊列
雖然 Vue.js 通常鼓勵開發人員沿着"數據驅動"的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。爲了在數據變化之後等待 Vue 完成更新 DOM ，可以在數據變化之後立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成後就會調用。