生命周期
生命周期鉤子函數(shù)介紹：
是在生命周期中添加的一些函數(shù)彻舰，這些函數(shù)可以讓開發(fā)者加入自己額外的邏輯糙捺。每個 Vue 實(shí)例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程诫咱。需要設(shè)置數(shù)據(jù)監(jiān)聽、編譯模板洪灯、將實(shí)例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等坎缭。同時在這個過程中也會運(yùn)行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機(jī)會。
演示
先引入vue.js掏呼，可以控制臺查看執(zhí)行順序
<body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app" v-on:click="modefind">
{{ message }} {{ count }}次
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
message: '點(diǎn)擊',
count: 0
},
// 初始化階段坏快，Vue的生命周期從創(chuàng)建一個Vue實(shí)例開始，之后Vue要進(jìn)行初始化事件和初始化生命周期哄尔。
beforeCreate() {
console.log('before create', this.message) // ! beforeCreate,這個勾子函數(shù)執(zhí)行在初始化之后假消，組件創(chuàng)建之前，還不能訪問數(shù)據(jù)岭接，所有data為空
},
created() {
console.log('created...', this.message) // ! created,這個勾子函數(shù)執(zhí)行在組件創(chuàng)建完成之后立即調(diào)用，組件有了data對象臼予，所有可以操作data
},
// 掛載階段鸣戴，
beforeMount() {
console.log('before mount', this.$el) // ! vue在掛載前先執(zhí)行beforeMount鉤子函數(shù),這個時候html還沒有創(chuàng)建，data數(shù)據(jù)已經(jīng)存在粘拾，虛擬的dom也已經(jīng)創(chuàng)建
},
mounted() {
console.log('mounted...', this.$el) // ! vm.$el替換舊的el窄锅，切換掉原有的編譯模板。完成頁面的數(shù)據(jù)掛載后執(zhí)行Mounted缰雇，這時可以操作數(shù)據(jù)和DOM了
},
// 更新階段
beforeUpdate() {
console.log('before update') // ! 當(dāng)數(shù)據(jù)更新之前調(diào)用beforeUpdate鉤子函數(shù)入偷，可以監(jiān)聽數(shù)據(jù)，但是不能在這里修改數(shù)據(jù)
},
updated() {
console.log('updated...') // ! 虛擬DOM重新渲染完成后執(zhí)行的鉤子函數(shù)械哟，我們可以獲取到新的數(shù)據(jù)
},
// 銷毀階段疏之，
beforeDestroy() {
console.log('before destroy') // ! 當(dāng)組件銷毀之前我們還是可以獲取到數(shù)據(jù)的，實(shí)例也完全可用暇咆，
},
destroyed() {
console.log('destroyed...') // ! 當(dāng)組件銷毀完成過后就不能操作DOM锋爪，所有的實(shí)例，子實(shí)例爸业，事件監(jiān)聽器都會被解綁
},
methods: {
modefind() {
this.count += 1
}
}
})
</script>
</body>
鉤子函數(shù)：
create 階段：
- beforeCreate()：在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽和事件/偵聽器的配置之前同步調(diào)用其骄。
- created()：在實(shí)例創(chuàng)建完成后被立即同步調(diào)用，這時可以獲取到選項(xiàng)中的 data 數(shù)據(jù)進(jìn)行處理扯旷。
mount 階段：
- beforeMount()：在掛載開始之前被調(diào)用：相關(guān)的
render函數(shù)首次被調(diào)用拯爽。 - mounted()：實(shí)例被掛載后調(diào)用，這時
el被新創(chuàng)建的vm.$el替換了
update 階段：
- beforeUpdate()：在數(shù)據(jù)發(fā)生改變后钧忽，DOM 被更新之前被調(diào)用毯炮。這里適合在現(xiàn)有 DOM 將要被更新之前訪問它，比如移除手動添加的事件監(jiān)聽器惰瓜。
- updated()：在數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和更新完畢之后被調(diào)用否副。
destroy 階段：
通常在銷毀階段，會銷毀的資源：已啟動的定時器崎坊、未完成的網(wǎng)絡(luò)請求备禀、手動綁定的事件、釋放 socket 連接等...
- beforeDestroy()：實(shí)例銷毀之前調(diào)用。
- destroyed()：實(shí)例銷毀后調(diào)用曲尸。該鉤子被調(diào)用后赋续，對應(yīng) Vue 實(shí)例的所有指令都被解綁，所有的事件監(jiān)聽器被移除另患，所有的子實(shí)例也都被銷毀纽乱。
還有兩個鉤子函數(shù)keep-alive階段
keep-alive 是 Vue 提供的一個組件，用于緩存不活動的組件實(shí)例昆箕，而不是銷毀它們鸦列。
- activated()：被 keep-alive 緩存的組件激活時調(diào)用。
- deactivated()：被 keep-alive 緩存的組件失活時調(diào)用鹏倘。
**errorCaptured : ** 在捕獲一個來自后代組件的錯誤時被調(diào)用薯嗤。
