uniapp中vue3的onLoad写法是怎样的

在uni-app中，`onLoad` 是 `setup` 函数的一个对应项，可以使用 `onLoad` 钩子函数来实现类似于Vue2中 `created` 钩子函数的功能。在Vue3中，`setup` 函数会在组件被创建时执行，因此可以在该函数中进行相应的初始化操作。

下面是一个使用 `setup` 函数实现 `onLoad` 功能的例子：

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

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

export default {
  setup() {
    const message = ref('Hello, World!');

    onMounted(() => {
      console.log('组件加载完成！');
    });

    return { message };
  },
};
</script>

在上面的代码中，我们使用了 `ref` 函数来创建一个响应式数据 `message`，并在 `onMounted` 钩子函数中打印了一条信息。因为 `setup` 函数会在组件创建时自动调用，所以可以把 `onMounted` 钩子函数放在 `setup` 函数中，达到 `onLoad` 钩子函数的效果。

相关问题

在uniapp + vue3的写法中如何获取onLaunch

在UniApp (基于Vue3) 开发环境下，`onLaunch` 是微信小程序的标准生命周期钩子之一，用于在小程序启动时执行相应的操作。但在Vue框架中，尤其是UniApp这样的跨平台框架，你需要理解的是，`onLaunch` 的概念并不直接对应 Vue3 的组件生命周期，因为它是原生小程序的功能。

如果你想要模拟类似的效果，在Vue3组件中，你可以创建一个名为 `mounted()` 或者自定义的生命周期钩子函数，例如：

export default {
  mounted() {
    // 这里可以放入你在微信小程序 onLaunch 中会做的初始化工作
    console.log('组件已挂载，类似于 onLaunch');
  },
  methods: {
    // 如果有特定的启动操作，也可以封装成一个方法并在此处调用
    init() {
      this.$emit('customEvent', '初始化操作'); // 使用自定义事件通知其他部分
    }
  }
};

然后在父组件或者其他地方通过 `$refs` 或者自定义事件来触发这个初始化过程：

<template>
  <your-component ref="yourComponent" @customEvent="handleInit"></your-component>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const yourComponent = ref(null);

onMounted(() => {
  yourComponent.value.init();
});
</script>

在这个例子中，`mounted` 相当于小程序的 `onLoad`，而自定义事件则是类似微信小程序的页面间通信机制。

uniapp的vue3写法

uniapp的vue3写法可以参考以下示例代码：

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

<script setup>
import { ref, onMounted, onShow, onHide } from 'vue'
import { useStore } from 'vuex'

// 在setup函数中定义变量和方法
const store = useStore()
const userInfo = ref(null)

onMounted(() => {
  // 组件挂载时执行的代码
  console.log('Component Mounted')
})

onShow(() => {
  // 页面显示时执行的代码
  console.log('Component Show')
  userInfo.value = uni.getStorageSync('userInfo')
  store.commit('保存登陆信息', userInfo.value)
})

onHide(() => {
  // 页面隐藏时执行的代码
  console.log('Component Hide')
})

// methods中的方法可以直接在template中调用
const methods = {
  退出登陆效果() {
    // 实现退出登陆的逻辑
  }
}
</script>