理解vue中的ref

前端代码

bash 复制代码

<template>
  <div class="container">
    <button @click="fetchDataFromBackend">获取后端信息</button>
    
    <div class="display-box">
      <p>返回的消息：{{ info }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

// 1. 定义响应式变量，用于绑定文字框
const info = ref('点击按钮获取内容...');

// 2. 编写请求函数
const fetchDataFromBackend = async () => {
  try {
    // 像后端接口发送 GET 请求
    const response = await axios.get('http://127.0.0.1:8000/api/data');
    
    // 3. 将返回的数据赋值给响应式变量，页面会自动更新
    info.value = response.data.message;
  } catch (error) {
    console.error("请求失败:", error);
    info.value = "无法连接到后端服务器";
  }
};
</script>

在上面的VUE的示例代码中，有一个info变量。继承自ref。

上面的代码其实是分了两部分，一部分是上面的VUE前端代码，一部分是下面的JS代码。

这里的ref在 JavaScript 中不是一个普通的字典（Object），而是一个"响应式代理对象"。因此不能直接用python中的字典类型去套。

这是一个非常棒的观察！对于刚从 Python（FastAPI）转到 Vue 3 的开发者来说，这确实是一个容易混淆的地方。

简单来说：info 在 JavaScript 中不是一个普通的字典（Object），而是一个"响应式代理对象"。

1. 什么是 `ref` 对象？

当你使用 const info = ref('...') 时，Vue 会把你的原始数据（字符串、数字或对象）包装在一个特殊的 RefImpl（Ref 实现） 对象中。

这个对象主要包含以下几个关键部分：

字段名	作用
`.value`	最核心的字段。存储你真正的原始值。Vue 拦截了对这个字段的访问和修改，从而实现"数据变了，页面跟着变"。
`__v_isRef`	一个标识符，Vue 用它来判断这个变量是不是由 `ref` 创建的。
`dep`	内部使用的依赖收集器，用来记录哪些组件正在使用这个变量，以便更新。

一句话总结： info 本身是一个"盒子"，.value 才是盒子里装的东西。在 <script> 中你需要手动开盒（.value），但在 <template> 模板中，Vue 会帮你自动开盒。

2. 案例对比：Python 字典 vs Vue Ref

为了方便理解，我们可以对比一下两者的操作逻辑：

在 Python (FastAPI) 中

数据是静态的。

python 复制代码

# 这是一个真正的字典
user_info = {"message": "Hello"}
print(user_info["message"]) # 直接访问键

在 Vue 3 中

数据是响应式的。

javascript 复制代码

// info 不是字典，而是一个被 Vue 监控的"盒子"
const info = ref("Hello"); 

// 修改数据
info.value = "World"; 

// 背后发生的事情：
// 1. 你修改了 value
// 2. info 内部的监听器触发
// 3. Vue 通知浏览器："嘿！页面上用到 info 的地方都要重画一下！"

3. 为什么不直接用普通变量？

如果你在 Vue 里直接写 let info = "Hello"，当你修改这个变量时，网页上的文字是不会变的。

案例演示：

普通变量： 你改了变量，页面像死水一样没反应。
ref 变量： 你改了 .value，页面上的文字会瞬间"跳"成新的内容。

4. 特殊情况：如果 ref 里面装的是对象

如果你用 ref 装了一个对象，你会发现需要写"两层"：