Vue 生命週期筆記
每個 Vue 組件都會經過初始化的步驟，設置數據，編譯模板，掛載 DOM 等，稱為生命週期，Vue 讓我們可以在特定階段添加我們自己所需的代碼，稱為lifecycle hooks，就是下面圖片紅色框框的。
lifecycle hooks
beforeCreate
在實例初始化時調用。
此階段在props後，但還取不到data()內的值，所以不能在這階段利用axios取得資料
created
在實例處理完所有與狀態相關的選項後調用。
此階段已設置數據, 屬性, 方法, 觀察者，vm.$el屬性還無法使用，可以在這呼叫 api 取得初始化頁面資料
beforeMonut
安裝組件之前調用。
當這個狀態被調用時，組件已經完成了它的反應狀態的設置，但是還沒有創建 DOM 節點，未與實體做綁定
mounted
安裝組件後調用。
所有同步子組件安裝完成，但不包括非同步組件，如想等待 View 渲染完畢可以使用，可以在此狀態内部使用 vm.$nextTick
beforeUpdate
當狀態更新時，即將更新DOM樹之前調用
updated
當狀態更新時，即將更新DOM樹之後調用，如要在此訪問更新後的DOM，請改用nextTick()
beforeUnmount
在要卸載組件實例之前調用。
調用時，組件實例還可以工作
unmounted
在組件卸載後調用。
所有子組件已卸載，相關反應效果停止
activated
緩存的實例被啟動，搭配<KeepAlive>。
deactivated
緩存的實例被關閉，搭配<KeepAlive>。
查看生命週期範例
利用子組件的安裝卸載查看生命週期。
<!DOCTYPE html>
<html>
<head>
<title>生命週期</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.global.js"></script>
</head>
<body class="bg-lighter">
<div class="container main my-5">
<div class="row">
<main class="col post">
<div class="mb-4">
<h1 class="mt-0 text-muted">生命週期</h1>
</div>
<div id="app">
<button @click="isShowing = !isShowing" class="btn btn-primary">
<span v-if="isShowing">隱藏元件</span>
<span v-else>顯示元件</span>
</button>
<hr />
<child v-if="isShowing" :prop="'propText'"></child>
</div>
<script type="text/x-template" id="childarea">
<div>
<h4>{{ text }}</h4>
<input type="text" class="form-control" v-model="text">
</div>
</script>
<script>
const child = {
template: "#childarea",
data: function () {
return {
text: "data 資料狀態",
};
},
props: ["prop"],
beforeCreate() {
console.log(`beforeCreate! ${this.text}`);
console.log(`beforeCreate! ${this.prop}`);
},
created() {
console.log(`created! ${this.text}`);
},
beforeMount() {
console.log(`beforeMount! ${this.text}`);
},
mounted() {
console.log(`mounted! ${this.text}`);
},
beforeUpdate() {
console.log(`beforeUpdate! ${this.text}`);
},
updated() {
console.log(`updated! ${this.text}`);
},
activated() {
alert(`activated! ${this.text}`);
},
deactivated() {
alert(`deactivated! ${this.text}`);
},
beforeUnmount() {
console.log(`beforeUnmount! ${this.text}`);
},
unmounted() {
console.log(`unmounted! ${this.text}`);
},
};
const App = {
data() {
return {
isShowing: false,
text: "APP data",
};
},
};
Vue.createApp(App).component("child", child).mount("#app");
</script>
</main>
</div>
</div>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
/>
</body>
</html>
|
查看<KeepAlive>範例，請將註解開啟
<keep-alive>
<component v-if="isShowing" is="child" />
</keep-alive>
|
wechat
乙太幣
