网站企业制作,企业网站建设的流程,全球邮企业邮箱登录,网络黄页推广软件哪个好Vue 3 常用响应式数据类型详解#xff1a;ref、reactive、toRef 和 toRefs
1. ref() - 响应式引用
基本概念
ref 是 Vue 3 中最基础的响应式 API#xff0c;用于创建一个包含响应式数据的引用对象。
核心特点
可以包装任何值类型#xff08;基本类型、对象、数组等ref、reactive、toRef 和 toRefs
1. ref() - 响应式引用
基本概念
ref 是 Vue 3 中最基础的响应式 API用于创建一个包含响应式数据的引用对象。
核心特点
可以包装任何值类型基本类型、对象、数组等通过 .value 属性访问和修改值模板中自动解包不需要写 .value
使用示例
import { ref } from vue// 基本类型
const count ref(0)
console.log(count.value) // 0
count.value // 修改值// 对象类型
const user ref({ name: 张三, age: 25 })
console.log(user.value.name) // 张三
user.value.age 26 // 修改嵌套属性// 模板中使用自动解包
// div{{ count }}/div
// div{{ user.name }}/div适用场景
基本数据类型字符串、数字、布尔值等需要完全替换引用的对象需要明确区分响应式和非响应式数据时
2. reactive() - 响应式对象
基本概念
reactive 用于创建深度响应式的对象包括数组、Map、Set 等集合类型。
核心特点
返回对象的 Proxy 代理嵌套对象也是响应式的不需要 .value 访问解构或展开会失去响应性
使用示例
import { reactive } from vueconst state reactive({count: 0,user: {name: 李四,age: 30},hobbies: [阅读, 编程]
})// 直接访问和修改
console.log(state.count) // 0
state.count// 嵌套对象也是响应式的
state.user.name 王五// 数组操作也是响应式的
state.hobbies.push(游泳)适用场景
复杂的对象结构需要深度响应式的场景需要管理多个相关状态时
3. toRef() - 转换为单个 ref
基本概念
toRef 用于从 reactive 对象中提取单个属性并保持响应性连接。
核心特点
保持与源属性的响应式连接修改会双向影响源对象即使源属性不存在也会创建 ref
使用示例
import { reactive, toRef } from vueconst state reactive({count: 0,name: 张三
})// 将响应式对象的属性转为ref
const countRef toRef(state, count)// 修改会双向影响
countRef.value
console.log(state.count) // 1state.count
console.log(countRef.value) // 2// 即使属性不存在也会创建ref
const nonExistRef toRef(state, nonExist)
nonExistRef.value 新值 // 会添加到原对象
console.log(state.nonExist) // 新值适用场景
需要将 reactive 对象的某个属性单独传递时需要确保属性访问的响应性时组合式函数中返回单个属性时
4. toRefs() - 转换为多个 ref
基本概念
toRefs 将 reactive 对象转换为普通对象但每个属性都是 ref。
核心特点
保持所有属性的响应式连接方便解构而不失去响应性常用于组合式函数返回值
使用示例
import { reactive, toRefs } from vueconst state reactive({count: 0,name: 张三
})// 转换为ref对象
const stateRefs toRefs(state)
/*
{count: Refnumber,name: Refstring
}
*/// 解构后仍保持响应性
const { count, name } toRefs(state)
count.value
console.log(state.count) // 1// 组合式函数中使用
function useFeature() {const state reactive({ x: 0, y: 0 })return toRefs(state) // 调用方可以解构而不失去响应性
}const { x, y } useFeature()适用场景
从组合式函数返回 reactive 对象时需要解构 reactive 对象但保持响应性时需要将 reactive 对象的属性批量传递给子组件时
对比总结
特性refreactivetoReftoRefs创建方式ref(value)reactive(obj)toRef(obj, key)toRefs(obj)值访问需要 .value直接访问需要 .value每个属性需要 .value模板使用自动解包直接使用自动解包每个属性自动解包主要用途基本类型/对象引用复杂响应式对象提取单个响应式属性解构响应式对象响应性保持完全响应式深度响应式保持与源连接保持所有属性连接
最佳实践建议 基础选择原则 简单数据用 ref复杂对象用 reactive需要解构用 toRefs 组合式函数 返回响应式数据时优先使用 toRefs这样调用方可以自由解构 性能考虑 大型对象使用 reactive 比多个 ref 更高效不需要深度响应式时考虑 shallowRef/shallowReactive 代码组织 相关状态组织在一个 reactive 对象中独立值使用 ref 类型安全 为 ref 和 reactive 提供 TypeScript 类型注解 const count refnumber(0)
const state reactive{name: string, age: number}({name: , age: 0})这些响应式 API 是 Vue 3 组合式 API 的核心理解它们的特性和适用场景对于开发高效的 Vue 应用至关重要。
