快捷導(dǎo)航

一文詳解vue生命周期在uniapp中的用法

更新時(shí)間：2024年01月22日 09:15:14 作者：沐渃清澄

在uniapp中,vue的生命周期的用法基本都得以保留,但是對(duì)于特殊的需求以及特殊的情況,uniapp還引入了一些特有的生命周期鉤子,本文給大家詳細(xì)介紹了vue生命周期在uniapp中的用法,感興趣的朋友可以參考下

前言

首先我們要了解什么是uniapp，uni-app是一種基于 Vue.js 的跨平臺(tái)應(yīng)用框架，可以幫助開(kāi)發(fā)者使用一套代碼同時(shí)構(gòu)建小程序、H5、APP等多個(gè)平臺(tái)的應(yīng)用。以下是 uni-app 的一些關(guān)鍵特性和概念：

跨平臺(tái)開(kāi)發(fā)： uni-app 支持同時(shí)開(kāi)發(fā)微信小程序、支付寶小程序、百度小程序、H5、APP 等多個(gè)平臺(tái)，通過(guò)一套代碼實(shí)現(xiàn)多端運(yùn)行。
基于 Vue.js： uni-app 基于 Vue.js 框架，開(kāi)發(fā)者可以使用熟悉的 Vue.js 語(yǔ)法進(jìn)行開(kāi)發(fā)，同時(shí)享受 Vue.js 生態(tài)系統(tǒng)的豐富資源。
統(tǒng)一組件和 API： uni-app 提供了一套統(tǒng)一的組件和 API，開(kāi)發(fā)者可以在不同平臺(tái)上使用相同的組件和接口，減少了因平臺(tái)差異而引起的代碼調(diào)整。
自定義組件和插件： 開(kāi)發(fā)者可以通過(guò)創(chuàng)建自定義組件和插件來(lái)擴(kuò)展 uni-app 的功能，實(shí)現(xiàn)更多定制化的需求。
支持原生能力： uni-app 提供了一些內(nèi)置的原生能力，例如拍照、錄音、獲取地理位置等，同時(shí)也支持調(diào)用原生小程序和原生 APP 的接口。
運(yùn)行時(shí)性能優(yōu)化： uni-app 通過(guò)將模板編譯為原生渲染的方式，優(yōu)化了運(yùn)行時(shí)性能，提高了應(yīng)用的響應(yīng)速度。
開(kāi)發(fā)工具支持： uni-app 提供了開(kāi)發(fā)工具，包括 HBuilderX等，用于輔助開(kāi)發(fā)和調(diào)試。
生態(tài)系統(tǒng)： uni-app 生態(tài)系統(tǒng)豐富，有大量社區(qū)貢獻(xiàn)的插件、模板和組件，方便開(kāi)發(fā)者快速搭建和部署應(yīng)用。

uniapp中的vue生命周期

在uniapp中，vue的生命周期的用法基本都得以保留，但是對(duì)于特殊的需求以及特殊的情況，uniapp還引入了一些特有的生命周期鉤子。如下面的例子：

1、基本的生命周期

在 uni-app 中，我們可以正常使用 vue 生命周期的常見(jiàn)鉤子，例如 created、mounted、updated、destroyed。

<template>
  <view>
    <p>{{ message }}</p>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    };
  },
  created() {
    console.log('vue created ');
  },
  mounted() {
    console.log('vue mounted ');
  },
  updated() {
    console.log('vue updated ');
  },
  destroyed() {
    console.log('vue destroyed ');
  }
}
// 輸出結(jié)果為：
// vue created
// vue mounted
// vue updated
// vue destroyed
</script>

在 uniapp中，created 生命周期在組件實(shí)例創(chuàng)建后被調(diào)用，mounted 生命周期在組件掛載到 DOM 后被調(diào)用。updated 生命周期會(huì)在數(shù)據(jù)更新導(dǎo)致重新渲染時(shí)調(diào)用。destroyed 生命周期在組件銷(xiāo)毀時(shí)被調(diào)用。

2、特有的生命周期鉤子

在uniapp 引入了一些特有的生命周期鉤子，可以用于處理特定平臺(tái)的需求。以下是一些示例：

onNavigationBarButtonTap：處理小程序端導(dǎo)航欄按鈕點(diǎn)擊事件。如：

<script>
export default {
  methods: {
    onNavigationBarButtonTap() {
      console.log('Button');
    }
  }
}
</script>

onNavigationBarButtonTap 生命周期鉤子用于處理小程序端導(dǎo)航欄按鈕點(diǎn)擊事件。當(dāng)用戶點(diǎn)擊導(dǎo)航欄按鈕時(shí)，此函數(shù)會(huì)被觸發(fā)。

onLaunch、onHide、onError：處理 APP 端的啟動(dòng)、進(jìn)入后臺(tái)和錯(cuò)誤等情況。

<script>
export default {
  onLaunch(options) {
    console.log('Launched', options);
  },
  onHide() {
    console.log('Hidden');
  },
  onError(err) {
    console.error('Error', err);
  }
}
</script>

在上述三個(gè)生命周期鉤子中，onLaunch、onError是會(huì)攜帶一個(gè)參數(shù)的，其中options，包含了 APP 啟動(dòng)時(shí)的參數(shù)信息，err，包含了錯(cuò)誤信息。

3、頁(yè)面生命周期

uniapp 的頁(yè)面生命周期在不同平臺(tái)中也有所不同，如小程序端的 onLoad、onReady 等

<script>
export default {
  onLoad(options) {
    console.log('Loaded', options);
  },
  onReady() {
    console.log('Ready');
  }
}
</script>

在 uniapp 中，onLoad 生命周期在頁(yè)面加載時(shí)被調(diào)用，onReady 生命周期在頁(yè)面渲染完成后被調(diào)用。onLoad 會(huì)接收頁(yè)面參數(shù) options，包含了頁(yè)面的啟動(dòng)參數(shù)。

結(jié)語(yǔ)

總的來(lái)說(shuō)，vue生命周期在uniapp中有了如下的變化：

生命周期的執(zhí)行順序： 在 uniapp 中，生命周期的執(zhí)行順序與 Vue.js 的標(biāo)準(zhǔn)執(zhí)行順序基本相同，但部分生命周期在小程序和APP端的執(zhí)行時(shí)機(jī)有所不同。
- 小程序端：onLoad -> onShow -> onReady -> onHide -> onUnload
- APP端：onLaunch -> onShow -> onHide -> onError
特有生命周期鉤子： uni-app 引入了一些特有的生命周期鉤子，例如 onNavigationBarButtonTap、onBackPress、onPageScroll 等，用于處理在不同端（小程序、APP等）的特定事件。
onReady 在小程序端： onReady 生命周期在小程序端表示頁(yè)面渲染完成，而在 Vue.js 中 mounted 生命周期表示 DOM 渲染完成。在 uni-app 中，你可能需要在 onReady 鉤子中進(jìn)行一些 DOM 操作。
APP端生命周期： 在 uni-app 的 APP 端，引入了額外的生命周期鉤子，如 onLaunch、onHide、onError。這些生命周期用于處理 APP 啟動(dòng)、進(jìn)入后臺(tái)和錯(cuò)誤等情況。
beforeDestroy 在APP端： 在 uni-app 的 APP 端，beforeDestroy 生命周期用于監(jiān)聽(tīng) APP 生命周期的銷(xiāo)毀情況，這在 Vue.js 中是沒(méi)有的。
Vue.js 生命周期相同： 除了上述變化，uni-app 中依然保留了 Vue.js 標(biāo)準(zhǔn)的生命周期鉤子，如 created、mounted、updated、destroyed。