当前位置：首页 > news >正文

#Vue3篇：响应式工具ref()、toRef()、 toRefs()、reactive()的用法和区别

news 2025/9/14 18:18:04

ref()

定义: ref()接收一个普通的Javascript值作为参数，将其转换为响应式对象（ref对象）。
ref对象有一个.value属性，用于获取和修改之。
参数1: 一个普通的Javascript值作为参数

import { ref } from 'vue'
const count = ref(0)
console.log(count.value) // 0
count.value++ // 1

参数2: 一个工厂函数，用于创建延迟计算的响应式对象。

import { ref } from 'vue'
const name = ref(() => {console.log('计算 name')return 'Vue 3'
})
console.log(name.value) // 计算 name, Vue 3

返回: 响应式对象

toRef()

定义: 将一个响应式对象的属性转换为一个单独的ref对象。
参数：第一个参数，响应式对象；第二个参数，响应式对象的某一属性。
作用：转换后的ref对象与原对象属性具有相同的响应式行为。当修改ref对象时，原对象的属性也会同时更新。

import { reactive, toRef } from 'vue'const user = reactive({name: 'Tom',age: 20
})const ageRef = toRef(user, 'age')console.log(ageRef.value) // 20
ageRef.value++console.log(user.age) // 21

toRefs()

定义: 将一个响应式对象转换成普通Javascript对象，这个普通对象中的所有属性都是ref对象。
参数：响应式对象
作用: 当修改ref对象时，原对象的属性也会同步更新。

import { reactive, toRefs } from 'vue'const user = reactive({name: 'Tom',age: 20
})const userRefs = toRefs(user)console.log(userRefs.age.value) // 20
userRefs.age.value++console.log(user.age) // 21

reactive()

定义：将一个普通Javascript对象转换为响应式对象
参数：普通对象
作用：响应式对象中的所有属性都是响应式的，当属性的值改变时，视图会自动更新。

import { reactive } from 'vue'const user = reactive({name: 'Tom',age: 20
})console.log(user.age) // 20
user.age++
// 视图自动更新

总
ref()用于创建简单的响应式对象；
toRef()用于将响应式对象的属性转换为单独的ref对象；
toRefs()用于将整个响应式对象转换成普通对象，每一个属性都是ref对象；
reactive()用于创建嵌套响应式对象

toRef() & toRefs()是两个不同的函数，用于处理响应式对象中的属性
在 Vue 3 中，toRefs() 和 toRef() 是两个不同的函数，用于处理响应式对象中的属性。

toRefs() 函数接受一个响应式对象，返回一个新的对象，该对象将所有属性转换为 ref 对象。这是因为当我们将响应式对象传递给子组件时，我们需要将其解构为单独的 ref 对象以避免在子组件中更改属性时破坏父组件的响应式追踪。通过使用 toRefs() 函数，我们可以将响应式对象的所有属性转换为 ref 对象，并将其传递给子组件，以便在子组件中使用属性时保持响应式追踪。

import { reactive, toRefs } from 'vue'const state = reactive({name: 'John',age: 30
})const refs = toRefs(state)
console.log(refs.name.value) // 'John'

toRef() 函数接受一个响应式对象和一个属性名称，返回一个新的 ref 对象，该对象引用响应式对象的属性。这是因为在某些情况下，我们只需要引用响应式对象的单个属性，并且不需要将整个响应式对象的属性都转换为 ref 对象。使用 toRef() 函数，我们可以将响应式对象的单个属性转换为 ref 对象。

import { reactive, toRef } from 'vue'const state = reactive({name: 'John',age: 30
})const ageRef = toRef(state, 'age')
console.log(ageRef.value) // 30