Vue實例的生命周期鉤子函數(shù)（8個）
1. beforeCreate
剛 new了一個組件遮精，無法訪問到數(shù)據(jù)和真實的dom局待，基本上這個好像不能干啥
2. created
data屬性完成了賦值，可以對數(shù)據(jù)進行修改但是不會觸發(fā)updated,在這里可以做初始數(shù)據(jù)的獲取
3. beforeMount
render準(zhǔn)備要渲染了碳蛋，函數(shù)中虛擬dom已經(jīng)創(chuàng)建完成滔灶，這時候改變數(shù)據(jù)也不會觸發(fā)update,在這里可以做初始數(shù)據(jù)的獲取
4. mounted
開始render糟红，渲染出真實dom瘦癌，執(zhí)行mounted鉤子函數(shù)猪贪，組件已經(jīng)出現(xiàn)在頁面中跷敬，數(shù)據(jù)讯私，事件，都DOM都處理好了西傀。這里你 可以改是進行真實的DOM操作
5. beforeUpdate
組件斤寇，實例數(shù)據(jù)更新之前會執(zhí)行的函數(shù)，虛擬DOM會重新構(gòu)建虛擬DOM拥褂，與上一次的虛擬DOM對比后重新渲染娘锁。切記不可 進行數(shù)據(jù)修改否則會出現(xiàn)死循環(huán)
6. updated
更新完會執(zhí)行的函數(shù)，切記不可進行數(shù)據(jù)修改否則會出現(xiàn)死循環(huán)
7. beforeDestroy
實例被銷毀之前會執(zhí)行的函數(shù)饺鹃，做善后的工作莫秆，清除計時器，清除非指令綁定的事件等等
8. destroyed
實例被銷毀后會執(zhí)行的函數(shù)悔详，也可以做善后工作镊屎。
<template>
<div class="hello">
Hello World!
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App"
};
},
beforeCreate: function() {
console.log("data屬性光聲明沒有賦值的時候");
},
created: function() {
console.log("data屬性完成了賦值");
},
beforeMount: function() {
console.log("頁面上的{{name}}還沒有被渲染成真正的數(shù)據(jù)");
},
mounted: function() {
console.log("頁面上的{{name}}被渲染成真正的數(shù)據(jù)");
},
beforeUpdate: function() {
console.log(" 數(shù)據(jù)（data屬性）更新之前會執(zhí)行的函數(shù)");
},
updated: function() {
console.log("數(shù)據(jù)（data屬性）更新完會執(zhí)行的函數(shù)");
},
beforeDestroy: function() {
console.log("實例被銷毀之前會執(zhí)行的函數(shù)");
},
destroyed: function() {
console.log("實例被銷毀后會執(zhí)行的函數(shù)");
}
};
</script>
<style scoped>
</style>復(fù)制代碼
)
console這樣一個輸出順序：
大概這樣一個 生命周期鉤子函數(shù)執(zhí)行的順序，包括我之前是用angular開發(fā)跟vue一樣 他也有自己的生命周期鉤子函數(shù)茄螃。
生命周期簡單來說就是一個組件從創(chuàng)建到初始化到銷毀的一個過程缝驳，在這個過程中有這些生命周期鉤子函數(shù)我們可以更方便的去操作整一個組件。
作者：前端攻略
鏈接：https://juejin.im/post/5bfce642e51d4538e3623c30
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)用狱，非商業(yè)轉(zhuǎn)載請注明出處运怖。
