Vue生命週期鉤子簡介

前端先鋒發表於2019-06-25
Vue

作者：Nwose Lotanna

翻譯：瘋狂的技術宅

原文：blog.logrocket.com/introductio…

未經允許，嚴禁轉載

img

在本文中，我們來學習可用於 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
複製程式碼
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文件的生命週期圖

Vue 有八種生命週期方法：

  1. Before create
  2. Created
  3. Before mount
  4. Mounted
  5. Before update
  6. Updated
  7. Before destroy
  8. 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
複製程式碼

將輸出以下介面：

img

注意，在載入元件之前，首先執行的是在生命週期鉤子中寫入的 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 中常用功能背後的原理的理解。

歡迎關注前端公眾號：前端先鋒，獲取前端工程化實用工具包。

Vue生命週期鉤子簡介

相關文章