uni-app 编译成小程序后 下面tab页切换会把加载过的tab页面的onShow都执行一遍

我依次点击tabbar是只触发一次的

在uni-app中，当你将应用编译成小程序时，可能会遇到Tab页切换时，已经加载过的Tab页面会重新触发onShow生命周期函数的问题。这通常是由于小程序的页面生命周期管理机制导致的。为了避免不必要的资源消耗和逻辑重复执行，我们可以通过一些方法优化这个行为。

以下是一个简单的代码示例，展示了如何在uni-app中管理Tab页的生命周期，以减少不必要的onShow调用：

1. 创建全局状态管理（如使用Vuex或简单的全局变量）来跟踪当前显示的Tab页。

// store.js (Vuex示例)
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentTab: 'home' // 默认显示的Tab页
  },
  mutations: {
    setCurrentTab(state, tab) {
      state.currentTab = tab;
    }
  }
});

1. 在Tab页组件中，根据全局状态决定是否执行onShow逻辑。

<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['currentTab']),
    isCurrentTab() {
      return this.$route.path.includes(this.currentTab); // 简单的路径匹配
    }
  },
  methods: {
    ...mapMutations(['setCurrentTab']),
    handleShow() {
      if (this.isCurrentTab) {
        // 仅在当前Tab页被显示时执行逻辑
        console.log('This tab is shown:', this.$route.path);
        // 其他初始化或更新逻辑
      }
    }
  },
  onShow() {
    this.handleShow();
  }
};
</script>

1. 在Tab切换时更新全局状态。

你可以在Tab栏组件的点击事件中更新当前Tab的状态：

<template>
  <view>
    <button @click="switchToHome">Home</button>
    <button @click="switchToProfile">Profile</button>
    <!-- 其他Tab按钮 -->
  </view>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
    ...mapMutations(['setCurrentTab']),
    switchToHome() {
      this.setCurrentTab('home');
      uni.switchTab({ url: '/pages/home/home' });
    },
    switchToProfile() {
      this.setCurrentTab('profile');
      uni.switchTab({ url: '/pages/profile/profile' });
    }
  }
};
</script>

通过上述方法，你可以有效地控制哪些Tab页需要在onShow时执行逻辑，从而避免不必要的重复执行。这种方法依赖于全局状态管理和路由路径的匹配，适用于大多数uni-app编译成小程序后的场景。