const { proxy } = getCurrentInstance() 详解

一、这行代码的含义

const { proxy } = getCurrentInstance()

拆解来看：

简单说：proxy 就是 Vue 2 中你熟悉的 this。

二、为什么需要它？

在 Vue 3 的 <script setup> 中，没有 this，所以无法直接访问：

getCurrentInstance() 就是弥补这个缺口的桥梁。

三、在本文件中的关联链

getCurrentInstance()
│
▼
proxy（组件代理对象，等同于 this）
│
▼
proxy.$refs.loginRef ← 访问模板中 ref="loginRef" 的表单组件
│
▼
.validate(valid => {…}) ← 调用 Element Plus 表单的验证方法
│
▼
验证通过 → 执行登录逻辑

具体对应关系：

模板中（第3行）：

<el-form ref="loginRef" :model="loginForm" :rules="loginRules" …>

👆 通过 ref="loginRef" 给表单组件注册引用

脚本中（第97行）：

proxy.$refs.loginRef.validate(valid => {
if (valid) {
// 验证通过，执行登录
loading.value = true
// …
}
})

👆 通过 proxy.$refs.loginRef 拿到表单实例，调用 validate() 方法

四、完整关联图

┌─ 模板 ──────────────────────────────────────────┐
│ <el-form ref="loginRef" …> │
│ <el-input v-model="loginForm.username"> │
│ <el-input v-model="loginForm.password"> │
│ <el-input v-model="loginForm.code"> │
│ <el-button @click="handleLogin"> │
└──────────┬──────────────────────────────────────┘
│ 点击按钮
▼
┌─ handleLogin() ─────────────────────────────────┐
│ proxy.$refs.loginRef.validate(valid => { │
│ if (valid) { │
│ ① 记住密码 → Cookies.set(…) │
│ ② userStore.login(loginForm.value) ───────┼──→ store/modules/user.js
│ .then(() => { │
│ router.push(redirect || "/") ─────────┼──→ 跳转首页
│ }) │
│ .catch(() => { │
│ getCode() ────────────────────────────┼──→ 重新获取验证码
│ }) │
│ } │
│ }) │
└──────────────────────────────────────────────────┘

五、⚠️ 值得注意的问题

getCurrentInstance() 是 Vue 的内部 API，官方文档明确标注：

⚠️ getCurrentInstance 仅在 setup 或生命周期钩子中可用。不要在异步操作后调用它。

而且 Vue 官方不推荐在生产代码中直接使用它来访问 proxy，更推荐的做法是：

推荐改法：直接用 ref 模板引用，无需 getCurrentInstance：

// 声明模板引用
const loginRef = ref(null)

// 直接使用，无需 proxy
function handleLogin() {
loginRef.value.validate(valid => {
if (valid) {
// …
}
})
}

模板中 ref="loginRef" 会自动绑定到同名的 const loginRef = ref(null)，这是 Vue 3 <script setup> 的官方推荐方式，更简洁、类型安全、无内部 API 依赖。

六、proxy 的其他用途

在本项目中，proxy 还常用于访问 [main.js](file:///e:/fuqiu-front-back/2-fuqiu-back-end/back-v1.0.0/src/main.js) 中挂载的全局方法：

// main.js 中挂载的全局方法
app.config.globalProperties.useDict = useDict
app.config.globalProperties.download = download
app.config.globalProperties.parseTime = parseTime
// …

// 其他组件中通过 proxy 访问
proxy.useDict('sys_normal_disable')
proxy.download('system/user/export', {…})
proxy.parseTime(new Date())

这些全局方法也可以通过 import 直接引入对应工具函数来替代，避免依赖 proxy。