360怎么做网站互联网营销培训课程
🔍 一、ref() 是什么？为什么需要它？
ref() 是 Vue 3 响应式系统的核心 API 之一，用于创建响应式数据引用。其核心作用是：
- 包装原始值：将基本类型（如 number, string）转换为响应式对象。
- 统一处理引用：无论是基本类型还是对象，均通过.value 访问和修改值。
- 依赖追踪：自动跟踪依赖，触发视图更新。
解决的问题：
- Vue 2 中data 返回对象难以直接处理基本类型的响应式。
- 统一响应式数据访问方式，简化逻辑。
🛠️ 二、ref() 基础使用
1️⃣ 创建与访问
import { ref } from 'vue' // 创建响应式数据
const count = ref(0) // 访问值：必须通过 .value
console.log(count.value) // 0 // 修改值
count.value++
2️⃣ 模板中使用
在模板中自动解包，无需 .value：
<template> <button @click="count++">{{ count }}</button>
</template> <script setup>
const count = ref(0)
</script>
3️⃣ 引用复杂对象
即使包装对象，仍使用 .value 访问：
const user = ref({ name: 'Alice', age: 25 })
user.value.age = 26
🧠 三、ref() 与 reactive() 的对比
| 特性 | ref() | reactive() |
|---|---|---|
| 支持类型 | 基本类型 + 对象 | 仅对象/数组 |
| 访问方式 | 必须通过 .value | 直接访问属性 |
| 解包行为 | 模板中自动解包，JS 中需 .value | 无解包，始终直接访问 |
| 适用场景 | 基本类型、需统一管理的响应式引用 | 复杂对象、嵌套数据结构 |
何时选择 ref()？
- 需要响应式的基本类型（如 number, boolean）。
- 需要强制统一访问方式，明确数据是响应式引用。
🔧 四、高级技巧：解锁 ref() 的隐藏能力
1️⃣ 解构 ref() 对象
使用 toRefs() 保持解构后的响应性：
import { ref, toRefs } from 'vue' const state = ref({ name: 'Bob', age: 30
}) // 解构后仍为响应式
const { name, age } = toRefs(state.value)
2️⃣ ref() 与 DOM 元素
结合模板 ref 属性获取 DOM 节点：
<template> <input ref="inputRef" />
</template> <script setup>
import { ref, onMounted } from 'vue' const inputRef = ref(null) onMounted(() => { inputRef.value.focus()
})
</script>
3️⃣ 性能优化：shallowRef()
对于不需要深度响应的大对象，使用 shallowRef()：
import { shallowRef } from 'vue' const bigData = shallowRef({ ... })
// 修改深层属性不会触发更新！
bigData.value.profile.name = 'Alice' // ❌ 不触发
bigData.value = { ...bigData.value } // ✅ 触发
🚨 五、常见陷阱与解决方案
1️⃣ 忘记 .value
const count = ref(0) // 错误 ❌
const double = count * 2 // 正确 ✅
const double = count.value * 2
2️⃣ 在 reactive() 中嵌套 ref()
自动解包机制：
const count = ref(0)
const state = reactive({ count }) console.log(state.count) // 0（无需 .value）
3️⃣ 异步更新问题
批量更新优化导致数据不同步：
const updateData = () => { count.value++ console.log(count.value) // 可能未立即更新 nextTick(() => { console.log(count.value) // 确保更新完成 })
}
🌟 六、ref() 底层原理揭秘
1️⃣ 响应式实现
- 基本类型：通过Object.defineProperty 包装。
- 对象类型：内部转换为 reactive() 处理。
2️⃣ 依赖收集与触发
- 依赖收集：在effect 中访问 .value 时记录依赖。
- 触发更新：修改 .value 时通知所有依赖的 effect 重新执行。
伪代码实现：
function ref(value) { return { get value() { track(this, 'value') // 收集依赖 return value }, set value(newVal) { value = newVal trigger(this, 'value') // 触发更新 } }
}
📌 七、总结：ref() 最佳实践
| 场景 | 使用建议 |
|---|---|
| 基本类型响应式 | 首选 ref() |
| 复杂对象 | 优先 reactive()，或 ref() + toRefs() |
| DOM 引用 | 结合模板 ref 属性使用 |
| 性能敏感的大对象 | shallowRef() |
| 需要统一数据访问方式 | ref() 强制使用 .value |
📢 讨论：你在使用 ref() 时遇到过哪些棘手问题？如何优化 ref() 的使用性能？欢迎分享经验！👇