深入理解Vue的組件生命週期-Vue.js-PHP中文網

深入理解Vue的組件生命週期

WBOY

發布： 2023-10-15 09:07:41

原創

634 人瀏覽過

深入理解Vue的組件生命週期

深入理解Vue的元件生命週期，需要具體程式碼範例

#引言：
Vue.js 是一款漸進式JavaScript 框架，以其簡潔易學、高效靈活的特性而備受開發者的青睞。在Vue的組件化開發中，了解組件的生命週期是重要的一環。本文將深入探討Vue組件的生命週期，並提供具體的程式碼範例，幫助讀者更好地理解和應用。

一、Vue 元件的生命週期圖示
Vue元件的生命週期可以看做是元件從創建到銷毀的整個過程。下圖是Vue組件的生命週期圖示，包含了不同階段的鉤子函數。當創建一個元件時，它會依次經歷「創建階段」、「掛載階段」、「更新階段」和「銷毀階段」。

（插入生命週期圖示）

二、Vue 元件生命週期的特定階段與鉤子函數

建立階段（Creation）
- beforeCreate：在實例初始化之後，資料觀測（data observer）和事件/watcher 事件配置之前被呼叫。此時，元件中的資料（data）和事件都還未初始化。
- created：在實例建立完成後被呼叫。此時，組件中的資料已經可以訪問，可以進行資料的初始化等操作。
掛載階段（Mounting）
- #beforeMount：在範本渲染成HTML之前被呼叫。此時，模板（template）已經編譯完成，但尚未掛載到頁面中。
- mounted：在模板渲染成HTML後被呼叫。此時，元件已經被掛載到頁面中，可以進行DOM操作。
更新階段（Updating）
- #beforeUpdate：在響應式資料改變且虛擬DOM重新渲染之前被呼叫。此時，元件中的資料已經發生了改變，但DOM尚未更新。
- updated：在虛擬DOM重新渲染和打補丁之後被呼叫。此時，元件的資料已經更新，DOM也已經更新完成。
銷毀階段（Destruction）
- #beforeDestroy：在實例銷毀之前被呼叫。此時，組件尚未被銷毀，仍然可以存取組件的資料和方法。
- destroyed：在實例銷毀之後被呼叫。此時，元件已經被銷毀，不能再存取元件的資料和方法。

三、程式碼範例

<template>
  <div>
    <p>组件生命周期示例</p>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  beforeCreate() {
    console.log('组件创建阶段：beforeCreate')
  },
  created() {
    console.log('组件创建阶段：created')
  },
  beforeMount() {
    console.log('组件挂载阶段：beforeMount')
  },
  mounted() {
    console.log('组件挂载阶段：mounted')
  },
  beforeUpdate() {
    console.log('组件更新阶段：beforeUpdate')
  },
  updated() {
    console.log('组件更新阶段：updated')
  },
  beforeDestroy() {
    console.log('组件销毁阶段：beforeDestroy')
  },
  destroyed() {
    console.log('组件销毁阶段：destroyed')
  }
}
</script>

登入後複製

上面的程式碼是一個簡單的Vue元件範例。在不同的生命週期階段，我們透過控制台輸出來查看鉤子函數的執行情況。可以透過以下步驟來運行範例：

建立一個Vue項目，並引入上述元件檔案。

在父元件中使用上述元件：

<template>
  <div>
 <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from '@/components/ChildComponent.vue'

export default {
  components: {
 ChildComponent
  }
}
</script>

登入後複製