Conhecendo e explorando o utilitário toRef

A função utilitária toRef” do Vue possui várias funcionalidades. Uma delas é a criação de uma referência reativa para uma propriedade específica de um objeto também reativo.

Isso é particularmente útil quando você precisa trabalhar apenas com uma parte do estado, sem envolver o objeto completo. No código abaixo, acessamos apenas a propriedade “firstName” pela ref “name” do objeto reativo.

<script setup lang="ts">
import { ref, toRef } from "vue"

const user = ref({
  firstName: "John",
  lastName: "Doe",
})

const name = toRef(user.value, "firstName")
</script>

<template>
  <div>
    <pre>{{ user }}</pre>
    <h1>{{ name }}</h1>
    <button @click="() => (name = `The name is ${name}`)">Append</button>
  </div>
</template>

A ref criada é sincronizada com o objetivo reativo, ou seja, alterar “name”, altera a propriedade “firstName” e vice-versa.

Outros dois casos de uso bastante interessantes são:

• criação de uma ref apenas de leitura, com um funcionamento parecido com uma computed property (nesse caso, sem a função setter)

<script setup lang="ts">
import { ref, toRef } from "vue"

const user = ref({
  firstName: "John",
  lastName: "Doe",
})

const name = toRef(() => user.value.firstName)
</script>

<template>
  <p>{{ name }}</p>
</template>

• normalização de valores para, por exemplo, prover em composables. Alguns podem receber refs como argumento, dessa forma, podemos usar toRef e transformar valores primitivos em refs.

<script setup lang="ts">
import { toRef } from "vue"

const number = 1
const myReactiveNumber = toRef(number)

console.log(myReactiveNumber.value) // 1
</script>

Descobri essa função muito por acaso, quando precisei utilizar um composable do VueUse que só recebia uma ref como argumento. Talvez ela seja um utilitário um pouco mais obscuro, mas vale a pena conhecer, e quem sabe, começar a aplicar.

Confere mais exemplos e leia a API completa na documentação oficial.