uni-app在vue3中怎么实现vue2的this.$root.$on('hook:onShow', handleShow)进行监听

在Vue 3和uni-app中，由于Vue 3移除了$root实例上直接的事件监听方法如$on、$off和$emit，我们需要采用Vue 3的组合式API（Composition API）或提供的其他机制来实现类似的功能。

在uni-app中，如果你想监听页面或组件的生命周期钩子，比如onShow（相当于Vue路由的activated或页面的显示事件），你可以使用onShow生命周期钩子直接在页面或组件中实现，或者使用Vue 3的provide/inject机制来跨组件通信。

下面是一个使用provide/inject和组合式API来模拟Vue 2中this.$root.$on('hook:onShow', handleShow)功能的例子：

1. 创建一个事件总线（Event Bus）：

// eventBus.js
import { reactive, provide, inject } from 'vue';

const eventBus = reactive({
  listeners: new Map(),
  on(event, listener) {
    if (!this.listeners.has(event)) {
      this.listeners.set(event, []);
    }
    this.listeners.get(event).push(listener);
  },
  emit(event, ...args) {
    const listeners = this.listeners.get(event);
    if (listeners) {
      listeners.forEach(listener => listener(...args));
    }
  }
});

export function provideEventBus() {
  provide('eventBus', eventBus);
}

export function useEventBus() {
  return inject('eventBus');
}

1. 在页面或组件中提供事件总线：

// 在页面的 setup 函数中提供事件总线
import { provideEventBus } from '@/utils/eventBus';

export default {
  setup() {
    provideEventBus();
    // 其他逻辑
    return {};
  },
  onShow() {
    const eventBus = inject('eventBus');
    eventBus.emit('onShow');
  }
};

1. 在需要监听onShow事件的组件中使用事件总线：

<template>
  <view>页面显示时会触发这个组件的监听器</view>
</template>

<script>
import { onMounted, useEventBus } from 'vue';

export default {
  setup() {
    const eventBus = useEventBus();

    onMounted(() => {
      eventBus.on('onShow', () => {
        console.log('页面显示了！');
      });
    });

    return {};
  }
};
</script>

通过这种方式，你可以实现跨组件的生命周期事件监听，而无需依赖Vue 2的$root.$on机制。这种方式更加灵活，并且符合Vue 3的设计理念。