前言

• 好，經(jīng)過上個(gè)章節(jié)的介紹完畢之后，了解了一下 uni-app-OptionAPI應(yīng)用生命周期和頁面生命周期
• 那么了解完了uni-app-OptionAPI應(yīng)用生命周期和頁面生命周期之后，這篇文章來給大家介紹一下 uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期
• CompositionAPI 是 Vue3.0 中的一個(gè)新特性，uni-app 也支持 CompositionAPI，所以我們就來看一下 uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期的寫法
• 首先不管三七二十一，先來新建一個(gè)項(xiàng)目

搭建演示環(huán)境

創(chuàng)建一個(gè)全新的項(xiàng)目：

然后在配置一下，微信小程序的 AppId，直接去之前的項(xiàng)目中拷貝一下即可，找到之前項(xiàng)目的 manifest.json 文件，然后選擇微信小程序配置，復(fù)制一下即可。

• 經(jīng)過如上的這么一頓操作之后，就可以搭建完畢運(yùn)行環(huán)境，與編碼環(huán)境
• 接下來就可以開始進(jìn)行介紹 uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期內(nèi)容了

步入正題

應(yīng)用生命周期

如果想使用 CompositionAPI 的話，需要在 script 標(biāo)簽中添加 setup, 添加了 setup 之后就不是導(dǎo)出一個(gè)默認(rèn)對(duì)象了，而是導(dǎo)出一個(gè)函數(shù)，將原來 App.vue 中的內(nèi)容全部轉(zhuǎn)換為函數(shù)定義，代碼如下所示：

<script setup>
	onLaunch(() => {
		console.log('App Launch')
	})
	onShow(() => {
		console.log('App onShow')
	})
	onHide(() => {
		console.log('App onHide')
	})
</script>

改造完畢之后，我們就可以運(yùn)行一下，看一下效果了，運(yùn)行之后，可以看到控制臺(tái)中報(bào)錯(cuò)了（我這里聲明一下后面的啟動(dòng)都以微信小程序啟動(dòng)），如下圖所示：

報(bào)錯(cuò)信息是 ReferenceError: onLaunch is not defined, 也就是說 onLaunch 這個(gè)函數(shù)沒有定義，因?yàn)槲覀兪褂玫氖?CompositionAPI，那么我們就需要在 setup 函數(shù)中導(dǎo)入 onLaunch 函數(shù)，onLaunch 從哪里導(dǎo)入呢？從 @dcloudio/uni-app 中導(dǎo)入，當(dāng)然如果說 onLaunch 需要導(dǎo)入那么其他的生命周期函數(shù)也需要導(dǎo)入，所以我們直接將所有的生命周期函數(shù)都導(dǎo)入進(jìn)來，代碼如下所示：

<script setup>
	import {onLaunch, onShow, onHide} from '@dcloudio/uni-app'
	
	onLaunch(() => {
		console.log('App Launch')
	})
	onShow(() => {
		console.log('App onShow')
	})
	onHide(() => {
		console.log('App onHide')
	})
</script>

<style>
</style>

然后運(yùn)行一下，可以看到控制臺(tái)中打印出來了我們的生命周期函數(shù)，如下圖所示：

這個(gè)就是在 UniApp 中 CompositionAPI 的寫法。

頁面生命周期

頁面生命周期的寫法和應(yīng)用生命周期的寫法是一樣的，只不過是在頁面中使用，我們快速搭建一下環(huán)境吧，配置一下 tabBar：

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首頁"
    }, {
        "pagePath": "pages/account/account",
        "text": "賬號(hào)"
    }]
}

然后在 pages 目錄下新建一個(gè) account 目錄，然后在 account 目錄下新建一個(gè) account.vue 文件，然后在 account.vue 文件中添加如下代碼：

<template>
  <view>
    <text>賬號(hào)</text>
  </view>
</template>

<script setup>
  import {onLoad, onShow, onReady, onHide, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'

  onLoad(() => {
    console.log("賬號(hào) onLoad");
  })
  onShow(() => {
    console.log("賬號(hào) onShow");
  })
  onReady(() => {
    console.log("賬號(hào) onReady");
  })
  onHide(() => {
    console.log("賬號(hào) onHide");
  })
  onPullDownRefresh(() => {
    console.log("賬號(hào) onPullDownRefresh");
  })
  onReachBottom(() => {
    console.log("賬號(hào) onReachBottom");
  })
</script>

<style>
</style>

index.vue 文件中添加如下代碼：

<template>
	<view>
		<text>首頁</text>
		<view class="content">
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 1</view>
			<view class="item">item 88</view>
			<view class="item">item 99</view>
		</view>
	</view>
</template>

<script setup>
	import {onLoad, onShow, onReady, onHide, onPullDownRefresh, onReachBottom} from '@dcloudio/uni-app'
	
	onLoad(() => {
		console.log("首頁 onLoad");
	})
	onShow(() => {
		console.log("首頁 onShow");
	})
	onReady(() => {
		console.log("首頁 onReady");
	})
	onHide(() => {
		console.log("首頁 onHide");
	})
	onPullDownRefresh(() => {
		console.log("首頁 onPullDownRefresh");
	})
	onReachBottom(() => {
		console.log("首頁 onReachBottom");
	})
</script>

<style lang="scss" scoped>
	.item {
		width: 100%;
		height: 200rpx;
	}
</style>

配置 pages.json 文件中 pages 相關(guān)內(nèi)容：

"pages": [
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首頁",
            "enablePullDownRefresh" : true
        }
    },
    {
        "path" : "pages/account/account",
        "style" : 
        {
            "navigationBarTitleText" : "賬號(hào)"
        }
    }
],

然后運(yùn)行一下，我這里以一個(gè)視頻的形式展示給大家，如下圖所示：

總結(jié)

好，經(jīng)過上面的介紹，我們就了解了 uni-app-CompositionAPI應(yīng)用生命周期和頁面生命周期的寫法

最主要是就是要知道在使用 CompositionAPI 的時(shí)候，需要在 script 標(biāo)簽中添加 setup，然后在 setup 函數(shù)中導(dǎo)入生命周期函數(shù)，然后在生命周期函數(shù)中添加我們的代碼即可。

要知道導(dǎo)入生命周期函數(shù)的時(shí)候，需要從 @dcloudio/uni-app 中導(dǎo)入，然后在 setup 函數(shù)中使用即可。

最后

大家好我是 BNTang, 一個(gè)熱愛分享的技術(shù)的開發(fā)者，如果大家覺得我的文章對(duì)你有幫助的話，可以關(guān)注我的公眾號(hào) JavaBoyL，我會(huì)在公眾號(hào)中分享一些IT技術(shù)和一些個(gè)人的見解，謝謝大家的支持。

總結(jié)

以上是生活随笔為你收集整理的【UniApp】-uni-app-CompositionAPI应用生命周期和页面生命周期的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。