### Vue 3 中 uView 的 onReady 生命周期与 setRules 功能实现 在 Vue 3 中，`onReady` 生命周期钩子的功能可以通过组合式 API 中的 `onMounted` 和 `onActivated` 等钩子来替代[^1]。然而，对于需要确保组件完全初始化后的场景（例如设置表单规则 `setRules`），可以使用 `onMounted` 配合 `nextTick` 来实现类似的效果。 以下是具体实现方法： #### 实现代码示例 ```javascript <template> <view> <!-- 表单内容 --> <u-form :model="form" ref="uForm"> <u-form-item label="用户名" prop="username"> <u-input v-model="form.username" /> </u-form-item> <u-form-item label="密码" prop="password"> <u-input v-model="form.password" type="password" /> </u-form-item> </u-form> <u-button @click="submitForm">提交</u-button> </view> </template> <script> import { ref, onMounted, nextTick } from 'vue'; import { uForm, uFormItem, uInput, uButton } from 'uview-ui'; export default { components: { uForm, uFormItem, uInput, uButton, }, setup() { const form = ref({ username: '', password: '', }); const uForm = ref(null); // 在组件挂载后设置规则 onMounted(() => { nextTick(() => { if (uForm.value) { uForm.value.setRules([ { required: true, message: '请输入用户名', trigger: ['change', 'blur'], name: 'username' }, { required: true, message: '请输入密码', trigger: ['change', 'blur'], name: 'password' }, ]); } }); }); // 提交表单 const submitForm = () => { uForm.value.validate((valid) => { if (valid) { console.log('验证通过:', form.value); } else { console.log('验证失败'); } }); }; return { form, uForm, submitForm, }; }, }; </script> ``` #### 说明 1. **生命周期钩子**：在 Vue 3 中，`onReady` 的功能可以通过 `onMounted` 结合 `nextTick` 来实现[^2]。`nextTick` 确保 DOM 已经更新完毕后再执行相关逻辑。 2. **设置规则**：`uForm` 组件提供了 `setRules` 方法，用于动态设置表单验证规则。需要确保 `uForm` 实例已经正确初始化后再调用该方法。 3. **表单验证**：通过 `validate` 方法对表单进行验证，并根据验证结果执行相应逻辑。 #### 注意事项 - 确保在 `setup` 函数中正确引用 `uForm` 组件实例。 - 如果项目中使用了路径别名，请确保配置正确[^3]。 - `setRules` 方法必须在 `uForm` 实例初始化完成后调用，否则可能会导致错误。 --- ###