Vue3中toRaw用法详解｜小红书爆款案例带你彻底搞懂！

大家好呀～今天来给大家分享一个 Vue3 中超级实用但容易被忽略的 API —— toRaw，在实际项目中的应用和注意事项，特别是如何在开发中避免踩坑！

---

💡什么是 toRaw？

在 Vue3 的响应式系统中（基于 reactive 和 ref），我们创建的响应式对象会被 Vue 进行「代理」包装。有时候我们需要获取这个对象的原始值（即没有被 Proxy 包裹的版本），这时候就要用到 toRaw。

✨官方定义：toRaw 返回响应式代理对象的原始对象。常用于临时读取而不触发依赖追踪，或写入而绕过响应性。

---

🔥为什么需要 toRaw？

想象一下你遇到以下场景：

• 你需要将某个响应式对象传给第三方库（比如 ECharts、axios 等），它们可能不兼容 Vue 的 Proxy；
• 或者你想比较两个对象是否是同一个引用；
• 又或者你在调试时想看到原始数据结构而不是 Proxy；

这些时候，使用 toRaw 就非常关键了！

---

🧪实战案例：Vue3 + Element Plus 表单提交防重复提交问题

场景描述：

我们有一个表单组件，用户点击“提交”按钮后会发送请求，为了防止用户多次点击，我们需要把表单数据进行深拷贝保存下来，在下次提交前判断是否发生了变化。

如果直接使用 JSON.stringify(form)，可能会因为 Proxy 的存在导致结果不可靠，所以我们需要先用 toRaw 获取原始对象再处理。

---

✅代码实现如下：

<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="邮箱">
      <el-input v-model="form.email" />
    </el-form-item>
    <el-button @click="submitForm">提交</el-button>
  </el-form>
</template>

<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage } from 'element-plus'

const form = ref({
  username: '',
  email: ''
})

let lastFormData = null

const submitForm = () => {
  const rawForm = toRaw(form.value) // 👈 使用 toRaw 获取原始对象
  const currentData = JSON.stringify(rawForm)

  if (lastFormData === currentData) {
    ElMessage.warning('表单内容未发生变化')
    return
  }

  // 模拟提交逻辑
  console.log('提交数据:', rawForm)
  ElMessage.success('提交成功')

  lastFormData = currentData
}
</script>

---

📌代码解析

关键点	解释
toRaw(form.value)	因为 form 是一个 ref，所以需要用 .value 获取其值，并通过 toRaw 去除响应式包装
JSON.stringify(rawForm)	对原始对象进行序列化，确保可以正确对比
lastFormData	保存上一次的表单快照，用来做比较

---

⚠️注意事项

• toRaw 不会解包 ref，如果你传的是 ref，请记得先 .value
• toRaw 返回的不是响应式的，不要对它进行赋值或修改，否则不会触发更新
• 如果传入的不是一个响应式对象，toRaw 会直接返回原对象

---

🧠总结一下

方法	用途	是否推荐使用
toRaw(obj)	获取响应式对象的原始对象	✅ 推荐用于非响应式操作
JSON.stringify(obj)	序列化对象	❗注意 Proxy 可能影响结果
structuredClone()	深拷贝（现代浏览器支持）	✅ 替代方案之一

---

📢互动时间

你有没有在项目中用过 toRaw？遇到了哪些坑？欢迎留言讨论👇我们一起成长！

别忘了点赞+收藏哦❤️ 下期继续带你看 Vue3 的进阶技巧！

---