快捷導(dǎo)航

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

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

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

前言

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

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

uniapp中的vue生命周期

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

1、基本的生命周期

在 uni-app 中，我們可以正常使用 vue 生命周期的常見鉤子，例如 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 生命周期會在數(shù)據(jù)更新導(dǎo)致重新渲染時調(diào)用。destroyed 生命周期在組件銷毀時被調(diào)用。

2、特有的生命周期鉤子

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

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ù)會被觸發(fā)。

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

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

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

3、頁面生命周期

uniapp 的頁面生命周期在不同平臺中也有所不同，如小程序端的 onLoad、onReady 等

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

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

結(jié)語

總的來說，vue生命周期在uniapp中有了如下的變化：

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