uni-app頁面Page和組件Component生命周期執行的先后順序是什么

本文小編為大家詳細介紹“uni-app頁面Page和組件Component生命周期執行的先后順序是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“uni-app頁面Page和組件Component生命周期執行的先后順序是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

文檔

• 頁面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

• 組件生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle

經測試，得出結論：

H5和微信小程序的生命周期函數調用順序不一致

H5

page beforeCreate
page onLoad
page onShow
page created
page beforeMount

component beforeCreate
component created
component beforeMount
component mounted

page onReady
page mounted

微信小程序

page beforeCreate
page created
page beforeMount

component beforeCreate
component created
component beforeMount

page onLoad
page onShow

component mounted

page mounted
page onReady

一般情況下，主要使用的周期函數如下，他們的執行順序是固定的

page onLoad

component mounted

page mounted

測試代碼

頁面

<template>
  <view class="page-container">
    <TestComponent></TestComponent>
  </view>
</template>

<script lang="ts">
// @ts-nocheck
import Vue from 'vue'
import type { PropType } from 'vue'
import TestComponent from './components/TestComponent.vue'

export default Vue.extend({
  components: {
    TestComponent,
  },

  props: {},

  data() {
    return {}
  },

  // 監聽頁面初始化，其參數同 onLoad 參數，為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參），觸發時機早于 onLoad
  onInit() {
    console.log('page onInit')
  },

  // 監聽頁面加載，其參數為上個頁面傳遞的數據，參數類型為 Object（用于頁面傳參）
  onLoad() {
    console.log('page onLoad')
  },

  // 監聽頁面卸載
  onUnload() {
    console.log('page onUnload')
  },

  // 監聽頁面顯示。頁面每次出現在屏幕上都觸發，包括從下級頁面點返回露出當前頁面
  onShow() {
    console.log('page onShow')
  },

  // 監聽頁面隱藏
  onHide() {
    console.log('page onHide')
  },

  // 監聽頁面初次渲染完成。注意如果渲染速度快，會在頁面進入動畫完成前觸發
  onReady() {
    console.log('page onReady')
  },

  // 監聽窗口尺寸變化
  onResize() {
    console.log('page onResize')
  },

  // 監聽用戶下拉動作，一般用于下拉刷新
  onPullDownRefresh() {
    console.log('page onPullDownRefresh')
  },

  // 頁面滾動到底部的事件（不是scroll-view滾到底），常用于下拉下一頁數據。具體見下方注意事項
  onReachBottom() {
    console.log('page onReachBottom')
  },

  // 用戶點擊右上角分享
  onTabItemTap() {
    console.log('page onTabItemTap')
  },

  // 用戶點擊右上角分享
  onShareAppMessage() {
    console.log('page onShareAppMessage')
  },

  // 監聽頁面滾動，參數為Object
  onPageScroll() {
    console.log('page onPageScroll')
  },

  // 監聽原生標題欄按鈕點擊事件，參數為Object
  onNavigationBarButtonTap() {
    console.log('page onNavigationBarButtonTap')
  },

  // 監聽頁面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示來源是左上角返回按鈕或 android 返回鍵；navigateBack表示來源是 uni.navigateBack ；
  onBackPress() {
    console.log('page onBackPress')
  },

  // 監聽原生標題欄搜索輸入框輸入內容變化事件
  onNavigationBarSearchInputChanged() {
    console.log('page onNavigationBarSearchInputChanged')
  },

  // 監聽原生標題欄搜索輸入框搜索事件，用戶點擊軟鍵盤上的“搜索”按鈕時觸發。
  onNavigationBarSearchInputConfirmed() {
    console.log('page onNavigationBarSearchInputConfirmed')
  },

  // 監聽原生標題欄搜索輸入框點擊事件（pages.json 中的 searchInput 配置 disabled 為 true 時才會觸發）
  onNavigationBarSearchInputClicked() {
    console.log('page onNavigationBarSearchInputClicked')
  },

  // 監聽用戶點擊右上角轉發到朋友圈
  onShareTimeline() {
    console.log('page onShareTimeline')
  },

  // 監聽用戶點擊右上角收藏
  onAddToFavorites() {
    console.log('page onAddToFavorites')
  },

  // 在實例初始化之前被調用
  beforeCreate() {
    console.log('page beforeCreate')
  },

  // 在實例創建完成后被立即調用
  created() {
    console.log('page created')
  },

  // 在掛載開始之前被調用
  beforeMount() {
    console.log('page beforeMount')
  },

  // 掛載到實例上去之后調用注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執行操作可以使用$nextTickVue官方文檔
  mounted() {
    console.log('page mounted')
  },

  // 數據更新時調用，發生在虛擬 DOM 打補丁之前。詳見  僅H5平臺支持
  beforeUpdate() {
    console.log('page beforeUpdate')
  },

  // 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。詳見  僅H5平臺支持
  updated() {
    console.log('page updated')
  },

  // 實例銷毀之前調用。在這一步，實例仍然完全可用。詳見
  beforeDestroy() {
    console.log('page beforeDestroy')
  },

  // Vue 實例銷毀后調用。調用后，Vue  實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
  destroyed() {
    console.log('page destroyed')
  },

  methods: {},
})
</script>

<style></style>

組件 components/TestComponent.vue

<template>
  <view class="component-container">component</view>
</template>

<script lang="ts">
// @ts-nocheck
import Vue from 'vue'
import type { PropType } from 'vue'

export default Vue.extend({
  components: {},

  props: {},

  data() {
    return {}
  },

  // 在實例初始化之前被調用
  beforeCreate() {
    console.log('component beforeCreate')
  },

  // 在實例創建完成后被立即調用
  created() {
    console.log('component created')
  },

  // 在掛載開始之前被調用
  beforeMount() {
    console.log('component beforeMount')
  },

  // 掛載到實例上去之后調用注意：此處并不能確定子組件被全部掛載，如果需要子組件完全掛載之后在執行操作可以使用$nextTickVue官方文檔
  mounted() {
    console.log('component mounted')
  },

  // 數據更新時調用，發生在虛擬 DOM 打補丁之前。詳見  僅H5平臺支持
  beforeUpdate() {
    console.log('component beforeUpdate')
  },

  // 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。詳見  僅H5平臺支持
  updated() {
    console.log('component updated')
  },

  // 實例銷毀之前調用。在這一步，實例仍然完全可用。詳見
  beforeDestroy() {
    console.log('component beforeDestroy')
  },

  // Vue 實例銷毀后調用。調用后，Vue  實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
  destroyed() {
    console.log('component destroyed')
  },

  methods: {},
})
</script>

<style></style>

讀到這里，這篇“uni-app頁面Page和組件Component生命周期執行的先后順序是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。