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写法

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>

uniapp vue3 表单写法

在uniapp中，可以使用Vue3的Composition API来编写表单。具体步骤如下：

1. 在setup函数中定义表单数据和表单验证规则：

import { ref } from 'vue'

export default {
  setup() {
    const formData = ref({
      username: '',
      password: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }

    return {
      formData,
      rules
    }
  }
}

2. 在模板中使用uni-form组件来渲染表单：

<template>
  <view>
    <uni-form :model="formData" :rules="rules">
      <uni-form-item label="用户名" prop="username">
        <uni-input v-model="formData.username" placeholder="请输入用户名"></uni-input>
      </uni-form-item>
      <uni-form-item label="密码" prop="password">
        <uni-input v-model="formData.password" type="password" placeholder="请输入密码"></uni-input>
      </uni-form-item>
      <uni-form-item>
        <uni-button type="primary" @click="submitForm">提交</uni-button>
      </uni-form-item>
    </uni-form>
  </view>
</template>

3. 在methods中定义submitForm方法来提交表单：

import { ref } from 'vue'
import { useForm } from '@ant-design-vue/use'

export default {
  setup() {
    const formData = ref({
      username: '',
      password: ''
    })

    const rules = {
      username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' }
      ]
    }

    const { validate } = useForm(formData, rules)
    const submitForm = () => {
      validate().then(() => {
        // 表单验证通过，可以提交表单
      }).catch(() => {
        // 表单验证不通过，不提交表单
      })
    }

    return {
      formData,
      rules,
      submitForm
    }
  }
}