Vue 3: Comprender la referencia reactiva aRef toRefs

Encapsula reactivamente el objeto entrante y crea un proxy para el objeto. Es una copia reactiva del objeto fuente y no es idéntica al objeto original. Convierte "profundamente" todas las propiedades anidadas del objeto fuente, descomprimiendo y manteniendo cualquier referencia dentro de ellas.

La API reactiva resuelve las deficiencias de la capacidad de respuesta de datos de Vue2 a través de defineProperty. También es muy sencillo de usar:

Cuando se asigna una referencia a una propiedad reactiva, la referencia se desenvuelve automáticamente y ya no es necesario acceder a ella a través de .value.

La función de referencia se utiliza para envolver un fragmento de datos en un objeto de referencia receptivo. Toma argumentos de cualquier tipo de datos como propiedades de valor dentro del objeto de referencia. Luego se puede acceder al valor o cambiarlo usando ref object.value.

Debido a que el tipo de datos subyacente solo se puede pasar como un valor y no como una referencia, encapsularlo dentro de un objeto hace que los datos respondan.

Puedes utilizar isRef para determinar si una variable es un objeto Ref.

Si a un objeto se le asigna un valor Ref, el objeto utilizará el método reactivo internamente para lograr una alta capacidad de respuesta.

A veces, es posible que necesitemos especificar un tipo complejo para el valor interno de ref. Para lograr esto de manera concisa, podemos pasar un parámetro genérico al llamar a ref para anular la inferencia predeterminada:

Debido a que ref simplemente envuelve un objeto como un objeto reactivo y pasa el valor al atributo de valor del objeto, es por eso que Necesitamos agregar .value cada vez que accedemos al objeto. Simplemente puede pensar en ref(obj) como reactivo({ valor: obj }).

La función toRef crea una nueva referencia de respuesta para una propiedad del objeto pasado. Esta referencia es aceptable y mantendrá un enlace de respuesta a su propiedad fuente.

El primer parámetro es el objeto de origen y el segundo parámetro es el nombre del atributo en el objeto de origen.

¿Una pequeña pregunta? Compare ref y toRef:

toRef es útil cuando desea pasar la referencia de un accesorio (es decir, una propiedad envuelta con ref) a una función compuesta:

Incluso si el fuente Si la propiedad no existe, toRef también devolverá una referencia utilizable, lo que lo hace particularmente útil cuando se usan accesorios opcionales que no están incluidos en toRef. Esto lo hace particularmente útil cuando se usan accesorios opcionales (que toRefs no puede manejar).

ToRefs es fácil de entender una vez que lo entiendes, su propósito es generar un nuevo objeto donde cada propiedad apunta a la referencia de datos de respuesta de la propiedad correspondiente del objeto pasado.

Es decir, el nuevo objeto en sí no tiene nada que ver con el objeto original (apunta a una nueva dirección de referencia), pero todas sus propiedades han establecido una relación de respuesta con las propiedades correspondientes del objeto fuente. .

Piense en toRef como el establecimiento de una referencia al valor del atributo de referencia y en toRef como una referencia a todos los valores del atributo de respuesta de referencia.

Tenga en cuenta:

Si se desestructura un objeto de respuesta, se perderá la capacidad de respuesta de ambas propiedades desestructuradas.

Puedes utilizar la función toRefs para establecer una asociación reactiva con el objeto fuente:

En aplicaciones prácticas, por ejemplo, si necesitas deconstruir un accesorio, puedes hacer esto para asegúrese de que los parámetros de la propiedad sean comillas responsivas:

Sin embargo, si el título es una propiedad opcional, la propiedad pasada puede no tener un título.

En este caso, toRefs no crea una referencia al título y es necesario reemplazarlo con toRef:

Hacer algo como esto garantiza que nuestro oyente pueda responder a los cambios en el título.

toRef es útil cuando se devuelve un objeto de respuesta desde una función de composición, por lo que el componente consumidor puede descomponer/difundir el objeto devuelto sin perder capacidad de respuesta: