【pure-admin】登录页面代码详解
reactive 函数及登录表单代码解析
代码作用说明
这段代码位于登录页面的 index.vue 文件中，第 60-64 行的代码定义了登录表单的数据结构：
const ruleForm = reactive({username: "admin",password: "admin123",verifyCode: ""
});
它创建了一个响应式对象 ruleForm，用于存储登录表单的数据，包含三个属性：
username: 用户名，默认值为 “admin”password: 密码，默认值为 “admin123”verifyCode: 验证码，默认值为空字符串
reactive 函数详解
reactive 是 Vue 3 Composition API 中的一个核心函数，它的主要作用是：
- 创建响应式对象：将普通的 JavaScript 对象转换为响应式代理对象
- 实现数据与视图的双向绑定：当响应式对象的属性发生变化时，依赖该数据的视图会自动更新
- 深层响应式：对嵌套对象的属性也能进行响应式处理
在登录组件中的应用场景
在这段代码中，reactive 的使用有以下几个关键作用：
- 表单数据绑定：
ruleForm对象与登录表单的输入字段进行双向绑定 - 初始值设置：为用户名和密码提供默认值，方便开发和测试
- 表单验证：与 Element Plus 的表单验证规则配合使用，实现输入验证
- 自动更新：当用户在输入框中输入内容时，
ruleForm对象中的对应属性会自动更新
技术原理
reactive 函数基于 JavaScript 的 Proxy API 实现，它会创建一个代理对象拦截对源对象的所有操作（如属性读取、设置、删除等）。当属性发生变化时，Vue 会通过依赖追踪系统通知相关的组件进行重新渲染。
与 Vue 2 的 data 选项不同，reactive 是 Composition API 中的函数式方法，提供了更灵活的响应式数据创建方式，特别适合在组合式函数中使用。
实际应用效果
在登录页面中，用户输入的用户名、密码和验证码会实时同步到 ruleForm 对象中，当点击登录按钮时，程序可以直接使用 ruleForm 中的数据发送登录请求。