当前位置：首页 > article >正文

深入解析 Vue 3 中的 onShow 和 onHide 生命周期

article 2024/11/23 19:00:14

深入解析 Vue 3 中的 `onShow` 和 `onHide` 生命周期

在使用 Vue 3 开发应用时，特别是对于基于微信小程序或者其他类似框架（如 UniApp、Taro 等）的项目，了解并灵活使用 onShow 和 onHide 生命周期显得尤为重要。本文将详细解析这两个生命周期的作用、使用场景及其注意事项，并提供完整的示例代码和相关知识点。

一、什么是 `onShow` 和 `onHide`

1. `onShow`

作用：在页面或组件显示时触发，通常用于处理页面初始化逻辑、刷新数据、恢复状态等场景。
适用场景：
- 从其他页面返回时重新获取数据。
- 页面从后台切回前台时刷新视图。
- 恢复暂停的动画或视频。

2. `onHide`

作用：在页面或组件隐藏时触发，通常用于保存状态、暂停任务、销毁无用资源等。
适用场景：
- 页面跳转或被切到后台时保存状态。
- 暂停动画、停止轮询请求。
- 防止内存泄漏或无意义的后台任务。

二、如何在 Vue 3 中使用 `onShow` 和 `onHide`

1. Vue 3 的组合式 API 支持

Vue 3 中提供了组合式 API，可以通过 onShow 和 onHide 来管理页面或组件的显示与隐藏状态。这些方法通常由框架（如 UniApp 或 Taro）提供，与 Vue 的 onMounted 和 onUnmounted 类似，但针对的是页面显示/隐藏的场景。

2. 使用语法糖定义生命周期

以下代码展示了如何在 Vue 3 中结合语法糖使用 onShow 和 onHide：

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

// 模拟数据
const data = ref([])

// 页面显示时重新获取数据
function fetchData() {
  console.log('页面显示时重新获取数据')
  data.value = ['Item 1', 'Item 2', 'Item 3']
}

// 页面隐藏时保存数据或清理
function saveData() {
  console.log('页面隐藏时保存数据')
  // 假设保存到本地
  localStorage.setItem('data', JSON.stringify(data.value))
}

// Vue 3 生命周期绑定
onShow(() => {
  console.log('onShow 生命周期触发')
  fetchData()
})

onHide(() => {
  console.log('onHide 生命周期触发')
  saveData()
})

// 页面加载和销毁
onMounted(() => {
  console.log('页面已加载')
  fetchData()
})

onUnmounted(() => {
  console.log('页面已卸载')
})
</script>

<template>
  <div>
    <h1>Vue 3 onShow 和 onHide 示例</h1>
    <ul>
      <li v-for="item in data" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<style scoped>
h1 {
  color: #42b983;
}
</style>

三、相关生命周期对比

生命周期	触发时机	适用场景
`onMounted`	页面或组件首次加载完毕时触发	数据初始化，DOM 操作等
`onUnmounted`	页面或组件销毁时触发	资源释放，事件解绑等
`onShow`	页面或组件显示（前台）时触发	数据刷新，恢复状态，重启任务等
`onHide`	页面或组件隐藏（后台）时触发	暂停任务，保存状态，防止资源浪费等

四、注意事项

与框架的适配：
- onShow 和 onHide 是微信小程序、UniApp、Taro 等框架特有的生命周期方法，在纯 Vue 3 项目中需要配合插件或框架支持。
- 使用前请确保项目中安装了对应框架支持包。
性能优化：
- 避免在 onShow 中频繁发送网络请求，建议结合缓存机制减少重复请求。
- 在 onHide 中尽量清理无用资源，防止内存泄漏。
与 Vue 生命周期的协作：
- onShow 和 onHide 可与 Vue 自带的 onMounted 和 onUnmounted 结合使用，形成更加精细的生命周期管理。

五、完整示例：结合路由的动态数据刷新

以下示例展示了在页面路由切换时，如何动态刷新数据并管理显示/隐藏状态：

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const pageData = ref({})

// 模拟 API 数据获取
function fetchPageData() {
  console.log('加载路由数据:', route.path)
  pageData.value = {
    title: `页面标题: ${route.path}`,
    description: `这是与 ${route.path} 路径相关的数据。`
  }
}

// 页面显示时加载数据
onShow(() => {
  console.log('onShow - 路由页面显示')
  fetchPageData()
})

// 页面隐藏时清理数据
onHide(() => {
  console.log('onHide - 路由页面隐藏')
  pageData.value = {}
})
</script>

<template>
  <div>
    <h2>{{ pageData.title }}</h2>
    <p>{{ pageData.description }}</p>
  </div>
</template>