uniapp組件生命周期詳解：從加載到銷毀完全掌握

一、組件生命周期概述

組件生命周期指的是，一個組件從創建到銷毀整個過程所經歷的各個階段。Vue.js 框架、React 框架和uniapp框架都有生命周期。掌握組件生命周期是理解組件工作原理的關鍵。組件的生命周期可以分為四個階段：創建、掛載、更新和銷毀，每個階段都有對應的生命周期函數，可以在特定階段進行特定的操作。

<script>
export default {
  name: 'myComponent',
  created() {
    console.log('組件創建')
  },
  mounted() {
    console.log('組件掛載')
  },
  updated() {
    console.log('組件更新')
  },
  destroyed() {
    console.log('組件銷毀')
  }
}
</script>

在上面的代碼中，我們定義了一個組件名為「myComponent」，並實現了該組件的四個生命周期函數，分別是創建階段的created、掛載階段的mounted、更新階段的updated和銷毀階段的destroyed。每個生命周期鉤子都有相應的方法，可以在特定的階段做出響應。

二、uni-app組件生命周期鉤子函數

1. 創建階段

在組件創建階段，會依次調用以下函數：

• beforeCreate：該函數在實例創建之前調用，此時實例的屬性和方法均未初始化。這個階段實例和元素都不存在。
• created：該函數在實例創建之後調用，此時實例的屬性和方法已經被創建、但是元素還沒有被渲染。這個階段實例已經存在，但是 DOM 元素還沒有，也就是你通過 this 或是 $el 還無法看到 html 結構。

<template>
  <div>{{message}}</div>
</template>
<script>
export default {
  beforeCreate() {
    console.log("組件尚未創建")
  },
  created() {
    console.log("組件已創建")
  },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在上面這個例子中，我們定義了組件的模板和腳本。在beforeCreate函數中打印出”組件尚未創建”，在created函數中打印出”組件已創建”。因此，在beforeCreate函數中，組件和實例甚至此時都尚未創建，所以無法訪問變量和方法。

2. 掛載階段

在組件掛載階段，會依次調用以下函數：

• beforeMount: 此函數在掛載開始之前被調用，並且所有的 render 函數和渲染的子組件已被首次調用或被更新。這個階段可以訪問到運行時生成的虛擬 DOM樹。但是，這時的結構還沒有被渲染成真正的 DOM 結構。
• mounted: 此函數在掛載完成後被調用，這時 DOM 元素已經掛載並渲染完畢。因此，在這個函數中可以訪問到 DOM 元素，也可以進行一些 DOM 操作。

<template>
  <div ref="box"></div>
</template>
<script>
export default {
  mounted() {
    console.log(this.$refs.box instanceof HTMLElement) // true
    this.$refs.box.style.width = "100px"
  }
}
</script>

在上面的代碼中，我們定義了一個空的<div>元素，並通過 $refs 獲取到 DOM 節點。在 mounted 函數中，我們利用 $refs.box 修改了該元素的 width 屬性。

3. 更新階段

在組件更新階段，會依次調用以下函數：

• beforeUpdate: 此時組件數據已經完成更新，但是 DOM 尚未更新，因此在此階段中可以進行更新前的數據操作。
• updated: 在此時組件的數據和渲染的 DOM 結構都已經完成了更新。

<template>
  <button @click="counter++">{{ counter }}</button>
</template>
<script>
export default {
  data() {
    return { counter: 0 }
  },
  updated() {
    console.log('更新後的計數器值為：' + this.counter)
  }
}
</script>

在上面的代碼中，我們定義了一個計數器按鈕，每次點擊都會讓計數器的值加1.在 updated 函數中，即可得到更新後的計數器值。

4. 銷毀階段

在組件銷毀階段，會依次調用以下函數：

• beforeDestroy: 此時組件即將被銷毀，但是 DOM 結構仍然存在。
• destroyed: 此時組件已經被銷毀，並且 DOM 結構也不存在了。

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return { message: 'Hello World!' }
  },
  destroyed() {
    console.log('組件已被銷毀')
  }
}
</script>

在上面的代碼中，我們定義了一個顯示”Hello World!”的 <div> 元素。在 destroyed 函數中打印出組件已被銷毀的信息。

三、uni-app組件生命周期實例

1. 創建階段

<template>
  <div>組件創建階段</div>
</template>
<script>
export default {
  beforeCreate() {
    console.log('組件即將創建')
  },
  created() {
    console.log('組件已經創建')
  }
}
</script>

2. 掛載階段

<template>
  <div>組件掛載階段</div>
</template>
<script>
export default {
  beforeMount() {
    console.log('組件即將掛載')
  },
  mounted() {
    console.log('組件已經掛載')
  }
}
</script>

3. 更新階段

<template>
  <button @click="counter++">{{ counter }}</button>
</template>
<script>
export default {
  data() {
    return { counter: 0 }
  },
  beforeUpdate() {
    console.log("即將更新計數器")
  },
  updated() {
    console.log("計數器已經更新")
  }
}
</script>

4. 銷毀階段

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  data() {
    return { message: 'Hello World!' }
  },
  beforeDestroy() {
    console.log('組件即將被銷毀')
  },
  destroyed() {
    console.log('組件已經被銷毀')
  }
}
</script>

總結

本文通過詳細講解uni-app組件的生命周期，從創建到銷毀完全掌握了組件的整個生命周期。組件的鉤子函數能夠讓我們在組件的生命周期中進行一些操作，比如在created函數中初始化數據，在mounted函數中訪問DOM元素等。掌握uni-app組件的生命周期，有助於我們更好地理解組件的工作原理，並能夠更好地應用uni-app框架進行開發。