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

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

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 {}
  },

  // 監(jiān)聽頁面初始化，其參數(shù)同 onLoad 參數(shù)，為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁面?zhèn)鲄ⅲ?，觸發(fā)時機早于 onLoad
  onInit() {
    console.log('page onInit')
  },

  // 監(jiān)聽頁面加載，其參數(shù)為上個頁面?zhèn)鬟f的數(shù)據(jù)，參數(shù)類型為 Object（用于頁面?zhèn)鲄ⅲ?
  onLoad() {
    console.log('page onLoad')
  },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  // Vue 實例銷毀后調(diào)用。調(diào)用后，Vue  實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。
  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 {}
  },

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

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

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

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

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

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

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

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

  methods: {},
})
</script>

<style></style>

到此這篇關(guān)于關(guān)于uni-app頁面Page和組件Component生命周期執(zhí)行的先后順序的文章就介紹到這了,更多相關(guān)Page和組件Component生命周期執(zhí)行順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: