前端代码templatedivclasscontainerbutton clickfetchDataFromBackend获取后端信息/buttondivclassdisplay-boxp返回的消息{{info}}/p/div/div/templatescript setupimport{ref}fromvue;importaxios fromaxios;//1. 定义响应式变量用于绑定文字框 const inforef(点击按钮获取内容...);//2. 编写请求函数 const fetchDataFromBackendasync(){try{// 像后端接口发送 GET 请求 const responseawait axios.get(http://127.0.0.1:8000/api/data);//3. 将返回的数据赋值给响应式变量页面会自动更新 info.valueresponse.data.message;}catch(error){console.error(请求失败:, error);info.value无法连接到后端服务器;}};/script在上面的VUE的示例代码中有一个info变量。继承自ref。上面的代码其实是分了两部分一部分是上面的VUE前端代码一部分是下面的JS代码。这里的ref在 JavaScript 中不是一个普通的字典Object而是一个“响应式代理对象”。因此不能直接用python中的字典类型去套。这是一个非常棒的观察对于刚从 PythonFastAPI转到 Vue 3 的开发者来说这确实是一个容易混淆的地方。简单来说info在 JavaScript 中不是一个普通的字典Object而是一个“响应式代理对象”。1. 什么是ref对象当你使用const info ref(...)时Vue 会把你的原始数据字符串、数字或对象包装在一个特殊的RefImplRef 实现对象中。这个对象主要包含以下几个关键部分字段名作用.value最核心的字段。存储你真正的原始值。Vue 拦截了对这个字段的访问和修改从而实现“数据变了页面跟着变”。__v_isRef一个标识符Vue 用它来判断这个变量是不是由ref创建的。dep内部使用的依赖收集器用来记录哪些组件正在使用这个变量以便更新。一句话总结info本身是一个“盒子”.value才是盒子里装的东西。在script中你需要手动开盒.value但在template模板中Vue 会帮你自动开盒。2. 案例对比Python 字典 vs Vue Ref为了方便理解我们可以对比一下两者的操作逻辑在 Python (FastAPI) 中数据是静态的。# 这是一个真正的字典user_info{message:Hello}print(user_info[message])# 直接访问键在 Vue 3 中数据是响应式的。// info 不是字典而是一个被 Vue 监控的“盒子”constinforef(Hello);// 修改数据info.valueWorld;// 背后发生的事情// 1. 你修改了 value// 2. info 内部的监听器触发// 3. Vue 通知浏览器“嘿页面上用到 info 的地方都要重画一下”3. 为什么不直接用普通变量如果你在 Vue 里直接写let info Hello当你修改这个变量时网页上的文字是不会变的。案例演示普通变量你改了变量页面像死水一样没反应。ref变量你改了.value页面上的文字会瞬间“跳”成新的内容。4. 特殊情况如果 ref 里面装的是对象如果你用ref装了一个对象你会发现需要写“两层”constuserref({name:张三,age:25});// 访问名字console.log(user.value.name);// 第一层 .value 进盒子第二层 .name 访问字典键 避坑小贴士在 Vue 3 开发中最常见的报错就是“忘了写.value”。如果你发现打印info出来是一堆奇奇怪怪的对象包含dep,__v_isRef等那说明你忘了加.value。但在 HTML 模板template里面绝对不要写.valueVue 会自动处理。划重点在vue的template中绝对不要写.value因为ref本身就是VUE自己定义的对象VUE会自己识别里面的内容并做处理会自动“开盒”。