作者：Nwose Lotanna
翻譯：瘋狂的技術宅
原文：blog.logrocket.com/introductio…
未經允許，嚴禁轉載
在本文中，我們來學習可用於 Vue JS 工作流程的所有hooks。
Vue
Vue JS 是一個非常先進的 JavaScript 框架，由尤雨溪和 Vue 核心團隊建立，超過 230 個開源社群愛好者貢獻了程式碼。 Vue 的使用者超過 870,000 人，並且已經 在 GitHub 上得到了140,000 個star ?。它由一個僅關注檢視層的核心庫和對其提供支援的生態系統組成，可幫助你解決大型單頁應用程式的複雜性問題。
在本文中，你將瞭解 Vue 例項從建立到銷燬的整個生命週期。
在開始之前的準備工作
本文適用於所有使用 Vue JS 的開發人員，包括初學者。在閱讀本文之前，你應該具備一些前提條件。
你將需要以下環境：
- 安裝 Node.js v10.x 或更高版本。你可以通過在終端中執行以下命令來驗證是否需要進行升級：
node -v
複製程式碼- 安裝 node package manager 6.7 或更高版本（NPM）
- 強烈建議使用程式碼編輯器：Visual Studio Code
- 把 Vue 的最新版本全域性安裝在你的計算機上
- 在你的計算機上安裝 Vue CLI 3.0。安裝前請先解除安裝舊的CLI版本：
npm uninstall -g vue-cli
複製程式碼然後安裝新的：
npm install -g @vue/cli
複製程式碼- 下載 Vue Mixins 入門專案，在這裡
- 解壓縮下載的專案
- 切換到解壓縮的檔案目錄並執行命令以使所有依賴項保持最新：
npm install
複製程式碼Vue 例項
Vue 程式由用 new Vue 建立的根 Vue 例項組成，並組織成巢狀的可重用元件樹。無論何時建立新的 Vue 專案，預設都會通過以下程式碼在 main.js 檔案中啟用Vue例項：
new Vue({
render: h => h(App),
}).$mount(‘#app’)
複製程式碼這段程式碼表示包含應用程式元件的 Vue 例項，此語法與單檔案應用等變體略有不同。
生命週期鉤子
每個 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 例項生命週期的不同階段新增我們的自定義邏輯，從而控制從建立到銷燬的流程。這將加深你對 Vue JS 中常用功能背後的原理的理解。