在vue中，生命週期鉤子函數指的是當生命週期經歷創建和更新DOM的過程中，會在其中運行的一些函數；在這些函數內部可以建立和宣告vue元件。
本文操作環境：windows10系統、Vue2.9.6版，DELL G3電腦。
每個 Vue 實例都經過一系列初始化步驟。從建立時設定資料到編譯模板，將實例裝載到DOM，最後在資料變更期間更新 DOM。這個過程被稱為Vue 實例的生命週期，在預設情況下，當它們經歷創建和更新DOM 的過程中，會在其中運行一些函數，在這些函數內部創建並聲明Vue 元件，這些函數稱為生命週期鉤子。
Vue 有八個生命週期方法：
Before create
Created
#Before mount
Mounted
#Before update
Updated
Before destroy
Destroyed
在本文中，你將了解所有的這些鉤子，並學習其每個階段的案例。
本文將使用測試元件，它位於 src 資料夾內的 components 資料夾中。它應該看起來像這樣：
// src/components/Test.vue
<template>
<div>
</div>
</template>
<script>
export default {
name: ‘Test’,
props: {
msg: String
}
}
</script>
<! — Add “scoped” attribute to limit CSS to this component only →
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>在本教程中，腳本部分將單獨用於各種鉤子案例。
beforeCreate()
這是在 Vue.js 中呼叫的第一個生命週期鉤子，它在 Vue 實例初始化後立即被呼叫。
<script>
export default {
name: 'Test',
beforeCreate() {
alert('beforCreate hook has been called');
console.log('beforCreate hook has been called');
}
}
</script>你可以在開發環境中執行程式來檢查介面。
npm run serve
注意，在載入元件之前，首先執行的是在生命週期鉤子中寫入的 alert 語句。這正是函數在 Vue 引擎創建應用程式元件之前調用的表現。此時正處於 beforeCreate 階段，尚未設定計算屬性、觀察者、事件、資料屬性及操作等內容。
created()
正如你所猜測的那樣，這是在 beforeCreated 鉤子之後立即調用的第二個生命週期鉤子。在這個階段，Vue 實例已經初始化，並且已經啟動了計算屬性、觀察者、事件、資料屬性和隨之而來的操作。
<script>
export default {
name: 'Test',
data() {
return {
books: 0
}
},
created() {
alert('Created hook has been called');
console.log(`books is of type ${typeof this.books}`);
}
}
</script>如果你執行該程序，你將會發現現在可以顯示資料類型。著在 beforeCreated 階段是不可能的，因為這時發生的活化還沒有發生。但是 Vue 實例在此階段尚未安裝，因此你無法在此處操作 DOM，元素屬性尚不可用。
beforeMount()
這是在 DOM 上掛載實例之前的那一刻，模板和作用域樣式都在這裡編譯，但你還是無法操作DOM 、元素屬性仍然不可用。
<script>
export default {
beforeMount() {
alert('beforeMount is called')
}
}
</script>mounted()
這是在 beforeMounted 之後所呼叫的下一個生命週期鉤子。在安裝實例後會立即呼叫它。現在 app 元件或專案中的其他元件都可以使用了。現在可以進行資料適合模板、DOM元素替換為資料填充元素之類的操作了，元素屬性現在也可以使用了。
<script>
export default {
mounted() {
alert('mounted has been called');
}
}
</script>這是使用 Vue CLI 建立的專案的預設位置，因為正如我們在開頭看到的那樣，已經在 main.js 檔案中完成了安裝。這就是你有可能無法使用其他掛鉤的原因，因為預設已經為你安裝了實例。
beforeUpdate()
在這裡對需要更新 DOM 的資料進行更改。在進行刪除事件偵聽器之類的變更之前，此階段適合任何邏輯。
<template>
<div> {{hello}}
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
books: 0,
hello: 'welcome to Vue JS'
}
},
beforeUpdate(){
alert('beforeUpdate hook has been called');
},
mounted(){
this.$data.hello= 'lalalalallalalalalaalal';
}
}
</script>最初在 DOM 上有一個歡迎註釋，但是在掛載階段（可以操作DOM的地方），資料會發生變化，因此beforeUpdate 的 alert 會在變更之前出現。
updated()
在對 DOM 更新之後立即呼叫此生命週期鉤子，它在呼叫 beforeUpdate 掛鉤之後執行。可以在此處執行與 DOM 相關的操作，但不建議更改此鉤子內的狀態，因為 Vue 已經專門為此提供了平台。
<template>
<div> {{hello}}
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
books: 0,
hello: 'welcome to Vue JS'
}
},
beforeUpdate(){
alert('beforeUpdate hook has been called');
},
updated(){
alert('Updated hook has been called');
},
mounted(){
this.$data.hello= 'lalalalallalalalalaalal';
}
}
</script>beforeDestroy()
呼叫此 Vue 生命週期鉤子的時機是在 Vue 實例被銷毀之前，實例和所有函數仍然完好無損並在此處工作。在這個階段你可以執行資源管理、刪除變數和清理元件。
<script>
export default {
name: 'Test',
data() {
return {
books: 0
}
},
beforeDestroy() {
this.books = null
delete this.books
}
}
</script>destroyed()
這是 Vue 生命週期的最後階段，其中所有的子 Vue 實例都已被銷毀，事件監聽器和所有指令之類的東西在此階段已被解除綁定。在物件上執行 destroy 之後調用它。
<script>
export default {
destroyed() {
this.$destroy()
console.log(this)
}
}
</script>當你執行程式並查看控制台時，將看不到任何內容。
【相關推薦：《vue.js教學》】
以上是什麼是vue的生命週期鉤子函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
