### Vue3 中 `this.$refs` 绑定 Form 的替代语法 在 Vue3 中，由于 Composition API 的引入，传统的 Options API 中的一些模式逐渐被新的方式取代。对于 `this.$refs` 来说，在 Vue3 中仍然可以正常使用，但它并不是推荐的最佳实践。取而代之的是使用 `ref` 和 `reactive` 等组合式 API。 以下是关于如何在 Vue3 中绑定表单并操作其值的详细介绍： #### 使用 `ref` 定义 DOM 引用 在 Vue3 中，可以通过 `ref` 函数创建一个响应式的引用，并将其绑定到模板中的元素上。当需要访问该元素时，可以直接通过返回的对象获取它。 ```javascript <template> <form ref="formRef"> <input type="text" v-model="formData.name" /> <button @click.prevent="submitForm">提交</button> </form> </template> <script> import { ref, reactive } from 'vue'; export default { setup() { const formRef = ref(null); // 创建对 DOM 元素的引用 const formData = reactive({ name: '' }); // 表单数据对象 const submitForm = () => { console.log(formRef.value); // 获取整个表单 DOM 对象 console.log(formData); // 输出当前表单数据 }; return { formRef, formData, submitForm }; }, }; </script> ``` 在此示例中： - `ref("formRef")` 被用来创建一个指向 `<form>` 元素的引用。 - 当点击按钮时，可以通过 `formRef.value` 访问实际的 DOM 元素[^1]。 #### 使用 `reactive` 处理复杂表单逻辑 如果表单结构较为复杂，则建议使用 `reactive` 将所有字段封装在一个对象中。这样不仅可以简化代码，还能更好地维护状态一致性。 ```javascript <template> <form @submit.prevent="handleSubmit"> <label>用户名：</label><input v-model="formState.username" /><br/> <label>密码：</label><input type="password" v-model="formState.password" /><br/> <button type="submit">登录</button> </form> </template> <script> import { reactive } from 'vue'; export default { setup() { const formState = reactive({ username: '', password: '' }); const handleSubmit = () => { alert(`用户名：${formState.username} 密码：${formState.password}`); }; return { formState, handleSubmit }; } } </script> ``` 在这个例子中： - 利用了 `reactive` 构建了一个可变的状态对象 `formState`，其中包含了所有的输入框值。 - 提交表单时会自动更新这些值，并展示给用户[^2]。 #### 总结 虽然 Vue3 支持传统方式 (`this.$refs`) 来操作 DOM，但在现代开发实践中更倾向于采用基于声明性和响应性的方法 (如上面提到的 `ref` 和 `reactive`) 。这种方式不仅提高了代码清晰度，还增强了组件之间的解耦程度[^4]。 ---