關于如何學習Vue，Vue的締造者尤雨溪前輩曾經在知乎發表過一篇新手向：Vue 2.0 的建議學習順序。
關于Vue其他知識介紹：
篇幅一
篇幅二
篇幅三
7. 生命周期鉤子
-
beforeCreate:
在實例初始化之后，數據觀測(data ovserver)和event/watcher事件配置之前被調用
$el:undefined
$data:undefined -
created:
在實例創建完成后被立即調用。在這一步，實例已完成以下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始。
$el:undefined
$data:[object object] -
beforeMount:
在掛載開始之前被調用：相關的 render 函數首次被調用。
該鉤子在服務器端渲染期間不被調用。
$el:undefined
$data:[object object] -
mounted:
el 被新創建的 vm.$el 替換，并掛載到實例上去之后調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
$el:[object HTMLDivElement]
$data:[object object] -
beforeUpdate:
數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。
你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。 -
updated:
由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或watcher取而代之。 -
beforeDestroy:
實例銷毀之前調用。在這一步，實例仍然完全可用。 -
destroyed:
Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。 -
activated
keep-alive組件激活時調用 -
deactivated
keep-alive組件停用時調用
注意：
-
Vue.nextTick和vm.$nextTick
以下內容來自Vue官網:異步更新隊列
可能你還沒有注意到，Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啟一個隊列，并緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，只會一次推入到隊列中。這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環“tick”中，Vue刷新隊列并執行實際 (已去重的) 工作。Vue 在內部嘗試對異步隊列使用原生的Promise.then和MutationObserve，如果執行環境不支持，會采用setTimeout(fn, 0)代替。
例如，當你設置vm.someData = 'new value'，該組件不會立即重新渲染。當刷新隊列時，組件會在事件循環隊列清空時的下一個“tick”更新。多數情況我們不需要關心這個過程，但是如果你想在 DOM 狀態更新后做點什么，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“數據驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這么做。為了在數據變化之后等待 Vue 完成更新 DOM ，可以在數據變化之后立即使用Vue.nextTick(callback)。這樣回調函數在 DOM 更新完成后就會調用。
//html
<p @click="changeMsg" ref='msg'>{{msg}}</p>
<p>{{msg1}}</p>
<p>{{msg2}}</p>
<p>{{msg3}}</p>
//js
data: function(){
return {
msg: '沒有更新',
msg1: '',
msg2: '',
msg3: '',
}
},
methods: {
changeMsg(){
this.msg = ' 更新完成'
this.msg1 = this.$ref.msg.textContent // 打印沒有更新
this.$nextTick(() => {
this.msg2 = this.$refs.msg.innerHTML //打印更新完成
})
this.msg3 = this.$refs.msgDiv.innerHTML 打印沒有更新
}
}
什么時候需要到Vue.nextTick()?
- 在 Vue 生命周期的
created()鉤子函數進行的 DOM 操作一定要放在Vue.nextTick()的回調函數中。原因是什么呢，原因是在created()鉤子函數執行的時候 DOM 其實并未進行任何渲染，而此時進行 DOM 操作無異于徒勞，所以此處一定要將 DOM 操作的 js 代碼放進 Vue.nextTick() 的回調函數中。與之對應的就是mounted()鉤子函數，因為該鉤子函數執行時所有的 DOM 掛載和渲染都已完成，此時在該鉤子函數中進行任何DOM操作都不會有問題 。 - 在數據變化后要執行的某個操作，而這個操作需要使用隨數據改變而改變的 DOM 結構的時候，這個操作都應該放進
Vue.nextTick()的回調函數中。
- 生命周期鉤子的一些使用方法：
beforecreate: 可以在這加個loading事件，在加載實例時觸發
created: 初始化完成時的事件寫在這里，如在這結束loading事件，異步請求也適宜在這里調用
mounted: 掛載元素，獲取到DOM節點
updated: 如果對數據統一處理，在這里寫上相應函數
beforeDestroy: 可以做一個確認停止事件的確認框
nextTick: 更新數據后立即操作dom
