目錄

• • H5
  • 微信小程序
  • 測試代碼

文檔

• 頁面生命周期 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 beforeMountcomponent beforeCreate component created component beforeMount component mountedpage onReady page mounted

微信小程序

page beforeCreate page created page beforeMountcomponent beforeCreate component created component beforeMountpage onLoad page onShowcomponent mountedpage mounted page onReady

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

page onLoadcomponent mountedpage 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（用于頁面傳參），觸發時機早于 onLoadonInit() {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')},// 監聽頁面滾動，參數為ObjectonPageScroll() {console.log('page onPageScroll')},// 監聽原生標題欄按鈕點擊事件，參數為ObjectonNavigationBarButtonTap() {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生命周期执行的先后顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。