0
点赞
收藏
分享

微信扫一扫

关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue

unadlib 03-18 22:45 阅读 2

unref:

常常用于获取ref定义的响应式数据的原始数据;

关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue_vue3


toRef:

toRef函数用于创建一个响应式引用,该引用指向响应式对象的某个属性。这样,即使你将这个属性的引用传递到其他地方,它仍然保持响应性。当原始对象的属性值发生变化时,toRef创建的引用也会更新,不能用于ref定义的响应式数据,否则跟上面一样用了白用,。

两种情景:

  1. 将响应式对象上的一个属性转换为一个ref。这种情况下,你需要提供两个参数:响应式对象和对象的键名。这样创建的ref会与源属性保持同步,改变源属性的值将更新ref的值,反之亦然。
  2. Vue 3.3+开始,toRef还可以用于规范化值、refgetter函数。这意味着你可以将一个普通值、一个已经是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定义的数据:

关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue_vue3_02


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定义的数据:

关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue_响应式_03


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定义的数据:

关于维护vue3的响应式的那些事:unref、toRef、toRefs、toRaw、toValue_响应式_04


toValue:

toValueVue 3.3+中引入的新函数,它用于将值、refgetter函数标准化为它们的值。如果参数是getter函数,它将被调用,并返回其结果。这对于在可组合函数中处理可能是值、refgetter的参数非常有用,但是无法用于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


举报

相关推荐

0 条评论