ref 应用于对象类型的一个案例

一个案例：

<template><el-form :model="loginForm" :rules="rules"ref="ruleForm"  class="login-container" label-position="left"label-width="80px" v-loading="loading"  status-icon><el-text class="mx-1" size="large" >系统登录</el-text><div style="margin: 20px" /><el-form-item label="用户名" prop="userName"><el-input v-model="loginForm.userName" placeholder="用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input  type="password" v-model="loginForm.password" placeholder="密码"></el-input></el-form-item><el-form-item><el-button type="primary" @click.native.prevent="submitClick">Login</el-button></el-form-item></el-form>	
</template><script setup>
import { ref } from "vue";
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { postReq } from '../utils/api'
import { ElMessageBox } from 'element-plus'
//导入用户仓库
import { useUserStore } from '../store/user.js'//路由
const router = useRouter()
//获取用户仓库对象
const userStore=useUserStore()
const loginForm=ref({userName: 'admin',password: 'admin123'
})const rules=ref({userName: [{ required: true, message: '请输入用户名', trigger: 'blur' },{ min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' },{ min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }]
})// 提交表单数据的函数
const submitClick=()=>{postReq("/user/login",loginForm.value).then(resp=>{if(resp.data.result){let u=resp.data.data;u.token=resp.data.token;u.isAuth=true;//console.log(u);userStore.setAuthenticated(u)//登录成功后跳转到指定页面router.push('/home')}else{ElMessageBox.alert(resp.data.errMsg, '提示',{})}})
}</script><style>.login-container {border-radius: 15px;background-clip: padding-box;margin: 180px auto;width: 350px;padding: 35px 35px 15px 35px;background: #fff;border: 1px solid #eaeaea;box-shadow: 0 0 25px #cac6c6;}.login_title {margin: 0px auto 40px auto;text-align: center;color: #505458;}.login_remember {margin: 0px 0px 35px 0px;text-align: left;}	
</style>

我们先看看，在 Vue3 中，ref() 和 reactive()的 的区别。当 ref() 应用于对象时，其内部实现和响应式机制与直接使用 reactive() 有本质区别，但最终效果有相似之处。以下是详细解析：

1. ref() 与 reactive() 的核心区别

• ref()：创建一个响应式引用对象，内部通过 Object.defineProperty 或 Proxy 拦截 .value 的读写操作。

  • 无论初始值是基本类型（如 ref(0)）还是对象（如 ref({})），ref 始终是一个包含 .value 属性的对象。
  • 当值为对象时，Vue 会自动将该对象转为 reactive 代理，但包裹层仍是 ref。

• reactive()：直接创建一个深层响应式的对象代理，无需 .value 访问。

  • 只能用于对象或数组，不能用于基本类型。

2. ref() 应用于对象时的内部机制

当你使用 ref() 包裹对象时：

javascript

const loginForm = ref({userName: 'admin',password: 'admin123'
});

• 外层结构：loginForm 是一个 ref 对象，具有 .value 属性。
• 内层值：loginForm.value 是一个通过 reactive() 创建的响应式代理对象。
• 响应式原理：
  1. 访问 loginForm.value.userName 时，先触发 ref 的 .value 的 getter，再触发内部 reactive 对象的 userName 的 getter。
  2. 修改 loginForm.value.password = 'newPassword' 时，触发内部 reactive 对象的 setter，通知依赖更新。

关键区别：ref 是一个 “容器”，而 reactive 是容器中的 “内容”。

3. 与直接使用 reactive() 的对比

javascript

// 方式1：使用 ref() 包裹对象
const loginFormRef = ref({userName: 'admin',password: 'admin123'
});// 方式2：直接使用 reactive()
const loginFormReactive = reactive({userName: 'admin',password: 'admin123'
});

• 访问方式：

  • loginFormRef.value.userName（需通过 .value）。
  • loginFormReactive.userName（直接访问）。

• 解构后响应性：

  • const { userName } = loginFormRef.value：userName 是普通变量，无响应性。
  • const { userName } = loginFormReactive：userName 失去响应性（需用 toRefs() 保持）。

• 类型转换：

  • ref 对象可通过 toRefs(loginFormRef.value) 转为响应式引用。
  • reactive 对象可通过 toRef(loginFormReactive, 'userName') 转为单个属性的响应式引用。

4. 应用场景选择

• 使用 ref() 包裹对象：

  • 当需要在组合式函数中返回对象，且保持统一的 .value 访问模式。
  • 当需要在模板中通过 v-model 绑定整个对象（如表单组件）。

• 直接使用 reactive()：

  • 当不需要 .value 语法，希望代码更简洁。
  • 当对象结构复杂，需要深层响应式，且无需解构。

5. 小结

• ref() 包裹对象时：外层是 ref 容器，内层是 reactive 代理，本质是 ref + reactive 的组合。
• 直接使用 reactive() 时：对象本身就是响应式代理，无需额外容器。

我们在模版中 这样使用的：

你们可以看到 我们没有用前文提到的 loginFormRef.value：userName   去访问啊，错了吗？

没错哟~~~

1. 模板中：v-model="loginForm.userName" 正确，因为 Vue 自动解包 loginForm 为 loginForm.value。
2. JavaScript 中：postReq("/user/login", loginForm.value) 正确，因为必须显式访问 .value。

如果使用 reactive，则代码需要改为：

// 使用 reactive
const loginForm = reactive({userName: 'admin',password: 'admin123'
});// 模板中仍然直接访问
<el-input v-model="loginForm.userName">// JavaScript 中直接使用
postReq("/user/login", loginForm); // 无需 .value

我们项目中主要应用的是ref，大部分项目也是这样的，原因是：

1. 统一访问模式：所有状态都用 .value，降低复杂度。
2. 类型安全：TypeScript 推导更直观，减少类型错误。
3. 组合式适配：更符合 Vue3 的函数式设计理念。组合函数，后面有空再讲。