Vue生態基礎知識整理

vue生命週期

1. beforeCreate:vue實例的掛載元素$el和數據對象data都爲undefined，還未初始化
2. created:vue實例的數據對象data有了，$el尚未
3. beforeMount:vue實例的$el和data都初始化了，但仍是掛載以前爲虛擬的dom節點，data.message還未替換
4. mounted:vue實例掛載完成，data.message成功渲染
5. beforeUpdate:當data變化時，會觸發beforeUpdate
6. updated:從新渲染後會觸發updated
7. beforeDestroy:在實例銷燬以前調用。在這一步，實例仍然徹底可用
8. destroyed:在Vue實例銷燬後調用。調用後，Vue實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬

vue-router的導航守衛

1. 導航被觸發。
2. 在失活的組件裏調用 beforeRouteLeave 守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件裏調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置裏調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件裏調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鉤子。
11. 觸發 DOM 更新。
12. 調用 beforeRouteEnter 守衛中傳給 next 的回調函數，建立好的組件實例會做爲回調函數的參數傳入。