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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  // 監(jiān)聽(tīng)用戶(hù)點(diǎn)擊右上角收藏
  onAddToFavorites() {
    console.log('page onAddToFavorites')
  },

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

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

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

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

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

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

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

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

  methods: {},
})
</script>

<style></style>

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

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

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

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

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

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

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

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

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

  methods: {},
})
</script>

<style></style>