Vue 3中ref

一、ref 的作用

ref 是 Vue 3 提供的​​响应式引用（Reactive Reference）​​函数，主要功能：

1. 将普通值包装成响应式对象
2. 通过 .value 属性访问/修改值
3. 自动触发视图更新

二、workspaceName 的代码分析

const workspaceName = ref('') // 创建含空字符串的响应式对象

这段代码中

1. 为什么要用 ref

• ​​响应式需求​​：需要让 Vue 能够追踪这个变量的变化
• ​​数据驱动视图​​：当 workspaceName 变化时，所有使用它的 DOM 会自动更新

2. 为什么要传空字符串 ''

• ​​初始化值​​：表示这个响应式变量的初始状态
• ​​类型推断​​：帮助 TypeScript 自动推断类型为 Ref<string>
• ​​安全访问​​：避免后续访问 .value 时出现 undefined

三、关键概念对比

操作	普通变量	使用 ref 的响应式变量
声明	let a = ''	const a = ref('')
读取	a	a.value
修改	a = 'new'	a.value = 'new'
视图响应	❌ 不会触发更新	✅ 自动触发更新

四、实际使用场景

在代码中的使用逻辑：

onMounted(async () => {const res = await getPlatformInfo()workspaceName.value = res.data.workspace_name // 修改响应式变量
})

执行过程：

1. 组件挂载时发起 API 请求
2. 获取到数据后通过 .value 赋值
3. Vue 检测到 workspaceName 变化
4. 所有使用 workspaceName 的 DOM 自动更新

总结

ref('') 的本质是：创建一个持有空字符串的响应式容器。虽然初始值是空字符串，但后续可以通过 .value 修改为实际需要的工作区名称，且所有相关视图会自动同步更新。这是 Vue 3 响应式系统的核心机制之一。