unref:
常常用于获取ref定义的响应式数据的原始数据;
toRef:
toRef
函数用于创建一个响应式引用,该引用指向响应式对象的某个属性。这样,即使你将这个属性的引用传递到其他地方,它仍然保持响应性。当原始对象的属性值发生变化时,toRef
创建的引用也会更新,不能用于ref定义的响应式数据,否则跟上面一样用了白用,。
两种情景:
- 将响应式对象上的一个属性转换为一个
ref
。这种情况下,你需要提供两个参数:响应式对象和对象的键名。这样创建的ref
会与源属性保持同步,改变源属性的值将更新ref
的值,反之亦然。 - 从Vue 3.3+开始,
toRef
还可以用于规范化值、ref
或getter函数
。这意味着你可以将一个普通值、一个已经是ref
的值,或者一个getter函数
作为参数传递给toRef
,它会返回一个ref
。
// 第一种情景:对象、键名 reactive定义的数据
import { reactive, toRef } from 'vue';
const state = reactive({
foo: 1,
bar: 2
});
// 使用响应式对象的属性创建一个ref
const fooRef = toRef(state, 'foo');
// fooRef现在是一个ref,并且与state.foo保持同步
console.log(fooRef.value); // 1
// 更改fooRef的值也会影响原始的state对象
fooRef.value++;
console.log(state.foo); // 2
// ****************************************
// 第二种情景:getter函数式的使用方式
import { toRef } from 'vue'
const props = defineProps({
name: {
type: String,
required: true,
default: 'weiq'
},
age: {
type: Number,
required: true,
default: 0
}
})
// Vue 3.3+中的getter语法
const testName = toRef(() => props.name)
不能用于ref定义的数据:
toRefs:
在Vue 3中,toRefs
函数用于将一个响应式对象转换为一个普通对象,其中每个属性都是一个r ef
,指向原始对象的相应属性。这意味着你可以将一个响应式对象的所有属性一次性转换为ref
,而不是一个一个地转换,但是使用的时候记得带上.value,还有就是不能用于ref定义的数据;
import { reactive, toRefs } from 'vue';
const state = reactive({
foo: 1,
bar: 2
});
// 将state对象的所有属性转换为ref
const stateAsRefs = toRefs(state);
// stateAsRefs现在是一个普通对象,其属性foo和bar都是ref
console.log(stateAsRefs.foo.value); // 1
console.log(stateAsRefs.bar.value); // 2
不能用于ref定义的数据:
toRaw:
toRaw
函数用于获取响应式对象的原始对象。这意味着如果你有一个通过reactive
创建的响应式对象,使用toRaw
可以访问该对象的非响应式版本,但是不能用于ref定义的数据,因为用了相当于白用;。
import { reactive, toRaw } from 'vue';
// reactive定义的数据
const reactiveState = reactive({ foo: 1, bar: 2 });
const rawState = toRaw(reactiveState);
console.log(rawState); // 输出原始对象:{ foo: 1, bar: 2 }
不能用于ref定义的数据:
toValue:
toValue
是Vue 3.3+中引入的新函数,它用于将值、ref
或getter
函数标准化为它们的值。如果参数是getter函数,它将被调用,并返回其结果。这对于在可组合函数中处理可能是值、ref
或getter
的参数非常有用,但是无法用于reactive定义的响应式数据,因为用了相当于白用。
import { ref, toValue } from 'vue';
// ref响应式数据
const myRef = ref(10);
const normalizedValue = toValue(myRef); // 返回10
// ***********************************
// 如果是getter函数
const getter = () => 20;
const valueFromGetter = toValue(getter); // 返回20