鉤子函數 說明 beforeCreate 在實例初始化之後，數據觀測和watch/event事件配置之前被調用 created 在實例創建完成後被立即調用，在這一步，實例已經完成數據觀測、屬性和方法的運算，以及watch/event事件回調。掛載階段還未開始，$el屬性尚不可用。多用於初始化數據或方 ...
| 鉤子函數 | 說明 |
|---|---|
| beforeCreate | 在實例初始化之後，數據觀測和watch/event事件配置之前被調用 |
| created | 在實例創建完成後被立即調用，在這一步，實例已經完成數據觀測、屬性和方法的運算，以及watch/event事件回調。掛載階段還未開始，$el屬性尚不可用。多用於初始化數據或方法 |
| mounted | 實例被掛載後調用，這時el被新創建的vm.\(el替換。如果實例掛載到了一個文檔內的元素，當mounted被調用時，vm.\)el也在文檔內。在模板渲染成html後使用（初始化頁面完成後，再對dom節點進行一些需要的操作） |
| beforeUpdate | 數據更新時調用。適合在更新前訪問現有的DOM，比如手動移除已添加的事件監聽器 |
| updated | 數據修改會導致虛擬DOM重新渲染，在渲染後調用 |
| activated | 被keep-alive緩存的組件激活時調用 |
| deactivated | 被keep-alive緩存的組件停用時調用 |
| beforeDestroy | 實例銷毀之前調用，在這一步，實例仍然可用 |
| destroyed | 實例銷毀後調用。該鉤子被調用後，對應vue實例的所有指令都被解綁，所有的事件監聽器被移除，所有的子實例也都被銷毀 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生命周期鉤子函數</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<!--引入vue文件-->
<script src="https://unpkg.com/[email protected]"></script>
<script>
//創建一個應用程式
const vm = Vue.createApp({
data(){
return{
msg: '白日依山盡，黃河入海流'
}
},
beforeCreate(){
console.log('beforeCreate');
},
created(){
console.log('created');
},
beforeMount(){
console.log('beforeMount');
},
mounted(){
console.log('mounted');
},
beforeUpdate(){
console.log('beforeUpdate');
},
updated(){
console.log('updated');
}
}).mount('#app');
setTimeout(function(){
vm.msg = '無邊落木蕭蕭下，不盡長江滾滾來';
},4000);
</script>
</body>
</html>
運行以上代碼，可以在網頁控制台看到內容改變前列印了前四個函數，之後內容改變之後又列印了最後兩個函數。
