Entendiendo las referencias en Vue

Nota del editor : este artículo fue actualizado por última vez por Ikeh Akinyemi el 30 de mayo de 2024 para analizar el uso de referencias con el sistema de reactividad de Vue y el uso de observadores de Vue para observar referencias y el estado reactivo.

En este tutorial, demostraremos cómo referenciar elementos HTML en tus componentes de Vue.js. Vue.js es un framework de JavaScript progresivo que se centra en la capa de vista, y las referencias son una característica importante de Vue que permite interactuar y manipular fácilmente los elementos del DOM. Este tutorial es apto para todos los niveles de experiencia con Vue, incluidos principiantes.

A continuación se presentan algunos requisitos previos antes de comenzar:

• Versión 10.x o superior de Node.js. Verifique su versión ejecutándola en su terminal o línea de comandos.node -v
• npm 6.7 o superior
• Un editor de código; recomiendo ampliamente VS Code
• Vue.js 3 instalado globalmente en su máquina
• Vue CLI 3.0 está instalado en su equipo. Para ello, desinstale primero la versión anterior de CLI con [Nombre del archivo] y luego instale la nueva con [Nombre del archivo].npm uninstall -g vue-clinpm install -g @vue/cli
• Descargue el proyecto de inicio de Vue
• Descomprima el proyecto descargado, navegue hasta él y ejecútelo npm installpara mantener todas las dependencias actualizadas

Entendiendo las referencias en Vue.js

Las referencias son propiedades de instancia de Vue.js que se utilizan para registrar o indicar una referencia a elementos HTML o elementos secundarios en la plantilla de su aplicación.

Si se añade un refatributo a un elemento HTML en la plantilla de Vue, se podrá hacer referencia a ese elemento o incluso a un elemento secundario en la instancia de Vue. También se puede acceder directamente al elemento DOM; es un atributo de solo lectura y devuelve un objeto.

Vue refle ayuda a “referenciar” elementos DOM de manera más eficiente que JavaScript getElementById, que se sabe que crea problemas de rendimiento.

El refatributo permite seleccionar un elemento DOM al actuar como clave en el $refatributo principal. refPor ejemplo, al colocar un atributo en un elemento de entrada, se expondrá el nodo DOM principal como , o se puede formatear como .this.$refs.inputthis.refs["input"]

Para obtener una guía visual sobre cómo hacer referencia con $refsen Vue.js, consulte este video tutorial .

this.refsen vista

Puedes manipular un elemento DOM definiendo métodos en su referencia. Por ejemplo, podrías enfocarte en un elemento de entrada usando this:

esto . $refs [ "entrada" ]. foco ()

De esta manera, las referencias se pueden usar igual que en JavaScript o en jQuery. Si bien realizan algunas de las mismas funciones, son más eficientes porque brindan acceso directo al elemento específico que necesitas. Por otro lado, simplemente devuelve el primer elemento del DOM que coincida con el selector especificado.document.querySelector('.element')$('.element')document.querySelector()document.querySelector()

$refsSe puede acceder a ellos tanto dentro como fuera de la instancia de Vue.js. Sin embargo, no son propiedades de datos, por lo que no son reactivos. Al inspeccionar la plantilla en el navegador, $refsno se muestran porque no son un atributo HTML; son solo un atributo de plantilla de Vue.

Introducción a las referencias de Vue.js

Si seguiste esta publicación desde el principio, deberías haber descargado el proyecto de inicio de Vue y abierto en VS Code. Abre la componentscarpeta y copia esto en el archivo:test.vue

plantilla div h2 ¡Hola, esto es para referencias, amigo!/ h2 p Ha contado {{this.counter}} veces / p input type="text" ref="input" button @click="submit" Agrega 1 al contador / button / div / plantilla script export default { name: 'Test', data() { return { counter: 0}}, methods: { submit() { this.counter++; console.log(this.ref)}}} / script                                                   

Después de copiar el código proporcionado en su archivo, ejecute el siguiente comando en su terminal para iniciar el servidor de desarrollo:test.vue

npm ejecutar servir

Una vez que el servidor de desarrollo esté en ejecución, abra su navegador y navegue a la URL local proporcionada (p. ej., ). Debería ver una aplicación de contador más sencilla con un campo de entrada y un botón. Verá que el contador se actualiza al hacer clic, pero al abrir las herramientas de desarrollo en el navegador, notará que registra :http://localhost:8080undefined

Es importante usar la sintaxis correcta al acceder a las referencias en Vue. En el ejemplo de código anterior, al iniciar sesión en el método, este devuelve . Esto significa que Vue no genera un error para , aunque la sintaxis sea incorrecta.this.refsubmitundefinedthis.ref

Copie el código a continuación en el archivo:test.vue

plantilla div h2 ¡Hola, esto es para referencias, amigo!/ h2 p Ha contado {{this.counter}} veces / p input type="text" ref="input" button @click="submit" Agrega 1 al contador / button / div / plantilla script export default { name: 'Test', data(){ return { counter: 0}}, methods: { submit(){this.counter++; console.log(this.$refs)}}} / script                                                   

Cuando ejecutas el reinicio del servidor de desarrollo e inspeccionas el resultado de la nueva implementación del código, notarás que ahora devuelve un objeto:

Un vistazo rápido al bloque de código revelará la sintaxis correcta: dentro de la plantilla, se llama “` ref, pero al hacer referencia a él dentro del script, se llamaba “` $refs. Es importante tener esto en cuenta para evitar un retorno “undefined“.

La refsintaxis utilizada dentro de la plantilla es un atributo asignado a un elemento. $refs, por otro lado, es una colección de los elementos de la aplicación a los que se les ha asignado el refatributo. Se puede acceder a todas las propiedades posibles del elemento referenciado, incluido el elemento, tal como se encuentra en la plantilla.

Uso refen la API de composición

En la API de Composición de Vue 3 , puedes crear referencias usando la reffunción . Al usar referencias en la API de Composición, puedes acceder y manipular fácilmente elementos del DOM, almacenar valores reactivos e integrar con otras funciones de la API de Composición como watchy computed.

Uso de referencias con el sistema de reactividad de Vue

En Vue 3, el sistema de reactividad se basa en las funciones reactivey ref. Ambas reactivepermiten refcrear estados reactivos en los componentes, pero presentan algunas diferencias en su uso y comportamiento.

A continuación se muestra un ejemplo que demuestra el uso de refy reactiveen un componente:

 plantilla   div   p  Conteo : {{ count }}/ p   p  Mensaje : {{ state . message }}/ p   button @click = "increment"  Incremento / button  / div  / template                    script  importar { ref , reactivo } desde 'vue' ;   exportar predeterminado {   configuración () { const count = ref ( 0 ); const estado = reactivo ({       mensaje : 'Hola' , });                    función incremento ( ) {       count.valor ++ ; }         devolver {       conteo ,       estado ,       incremento , }; }, }; / script        

La reffunción toma un valor inicial y devuelve una referencia reactiva a ese valor. La reffunción s puede contener cualquier tipo de valor, incluyendo primitivos, objetos y matrices:

 plantilla   div   tipo de entrada = "texto" ref = "entrada" v - modelo = "valorDeEntrada" /  botón @click = "enfoqueEntrada"  Entrada de enfoque / botón   p  Valor de entrada : {{ valorDeEntrada }}/ p  / div  / plantilla                     script  importar { ref , onMounted } desde 'vue' ;   exportar predeterminado {   configuración () { constante entrada = ref ( null ); constante valorDeEntrada = ref ( '' );               onMounted (() = {       entrada . valor . foco (); });          función focusInput ( ) {       entrada.valor.foco ( ) ; }​         devolver {       entrada ,       valorDeEntrada ,       entradaDeEnfoque , }; }, }; / script        

En el ejemplo anterior, usamos la plantilla para crear una referencia al elemento. Luego, en la función, usamos una que almacenaría la referencia al elemento.ref="input"inputsetupconst input = ref(null)refinput

A continuación, tenemos , que crea otra referencia que almacena el valor del elemento y está enlazada a la directiva en la plantilla. Con estas dos referencias, se puede llamar automáticamente dentro del gancho de ciclo de vida, enfocando el elemento al montar el componente. A continuación, se define la función para enfocar el elemento programáticamente al hacer clic en el botón.const inputValue = ref('')inputv-modelinput.value.focus()onMountedinputfocusInputinput

Obtener elementos DOM en Vue.js

Intentemos registrar algunas propiedades que podrían interesarnos. Su archivo debería verse así:test.vue

plantilla div h2 ¡Hola, esto es para referencias, amigo! / h2 p Ha contado {{this.counter}} veces / p input type="text" ref="input" button @click="submit" Agregar 1 al contador / button / div / plantilla script export default { name: 'Test', data(){ return { counter: 0}}, methods: { submit(){ this.counter++; console.log(this.$refs)}}} / script style scoped p, input, button { font-size: 30px; } input, button { font-size: 20px; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } / estilo                                                          

La aplicación en su navegador debería verse así:

Visualización de elementos HTML en Vue.js

Para mostrar el elemento HTML tal como está en el DOM, vaya al submitmétodo y cambie el methodscódigo a lo siguiente:

métodos: { enviar(){ este.contador++; consola.log(este.$refs.input) } }

La entrada aquí es el nombre de referencia que creó anteriormente dentro del elemento ( ref="input"). Puede ser cualquier nombre que elija.

Más información →

Visualización del valor de entrada HTML

Para mostrar el valor de entrada del elemento HTML (la cadena que se escribió en el cuadro de texto en la interfaz de usuario), vaya al submitmétodo y cambie el código de la siguiente manera:

métodos: { enviar(){ este.contador++; consola.log(este.$refs.entrada.valor) } }

Esto muestra exactamente la cadena que escribes, lo que demuestra una funcionalidad similar a la que se puede lograr usando querySelectorJavaScript estándar o los métodos selectores de jQuery.

Visualización de la URL de un elemento Vue

La página web donde se encuentra el elemento también es una de las muchas cosas que se pueden mostrar con Vue ref. Acceda al submitmétodo y cambie el código a esto:

métodos: { enviar(){ este.counter++; consola.log(este.$refs.input.baseURI) }}

Hay muchas otras cosas a las que puedes acceder y registrar simplemente refmediante la información del objeto devuelto.

Manejo de condicionales en Vue.js

Las referencias de Vue.js también se pueden usar dentro de elementos que generan múltiples elementos en el DOM, como sentencias condicionales donde v-forse usan directivas. En lugar de devolver un solo objeto, las referencias devuelven un array de los elementos cuando se invocan. Para ilustrar esto, creemos una lista simple:

plantilla div p v-for="coche en 4" v-bind:key="coche" ref="coche" Soy el coche número {{coche}}/p botón @click="enviar"Ver referencias/botón /div/templatescriptexport predeterminado { nombre: 'Prueba', datos(){ devolver { } }, métodos: { enviar(){ console.log(this.$refs) } }}/script

Cuando lo ejecutes nuevamente en el servidor de desarrollo, se verá así:

Integración de referencias con observadores de Vue

Los observadores de Vue permiten observar cambios en los datos reactivos y ejecutar acciones en función de ellos. En Vue 3, se puede usar esta watchfunción para observar las referencias y el estado reactivo.

Para ver una referencia, puedes pasarla directamente como primer argumento de la watchfunción. Aquí tienes un ejemplo:

plantilla div input type="text" v-model="mensaje" / pMensaje revertido: {{ reversedMessage }}/p /div/templatescriptimport { ref, watch } from 'vue';export default { setup() { const mensaje = ref(''); const reversedMessage = ref(''); watch(mensaje, (nuevoValor) = { reversedMessage.valor = nuevoValor.split('').reverse().join(''); }); return { mensaje, reversedMessage, }; },};/script

En este ejemplo, tenemos una messagereferencia vinculada a un campo de entrada mediante v-model. También tenemos una reversedMessagereferencia que mostrará la versión invertida del mensaje.

Usamos la watchfunción para supervisar la messagereferencia. Cuando cambia el valor de message, se activa la función de devolución de llamada, que revierte el mensaje y lo asigna a reversedMessage. También se pueden supervisar varias referencias o una combinación de referencias y estado reactivo pasando un array a la watchfunción:

watch([ref1, ref2, reactiveState], ([newRef1, newRef2, newReactiveState]) = { // Función de devolución de llamada que se activa cuando cambia cualquiera de los valores observados});

Casos de uso para Vue watchcon referencias

• Propiedades calculadasLos observadores pueden usarse como alternativa a las propiedades calculadas. Si tiene un cálculo complejo que depende de múltiples referencias o del estado reactivo, puede usar un observador para realizar el cálculo cuando cambie alguna de las dependencias.
• Efectos secundariosLos observadores son útiles para activar efectos secundarios según cambios en las referencias o el estado reactivo. Por ejemplo, se puede usar un observador para realizar una llamada a la API cuando cambia un valor de referencia específico.
• ValidaciónLos observadores se pueden usar para validar la entrada del usuario en tiempo real. Se puede observar una referencia que representa la entrada del usuario y realizar comprobaciones de validación cuando el valor de entrada cambia.
• Sincronización de datosLos observadores se pueden usar para sincronizar datos entre diferentes partes de la aplicación. Por ejemplo, si tiene una referencia que representa un elemento seleccionado, puede usar un observador para actualizar otras partes de la interfaz de usuario en función de dicho elemento.
• AnimacionesLos observadores pueden usarse para activar animaciones según cambios en las referencias o el estado reactivo. Puedes observar una referencia y aplicar animaciones cuando su valor cambia.

A continuación se muestra un ejemplo que demuestra el uso de un observador para la sincronización de datos:

plantilla div select v-model="selectedOption" option value="A"Opción A/opción option value="B"Opción B/opción option value="C"Opción C/opción /select pSelected: {{ selectedOption }}/p pMessage: {{ message }}/p /div/templatescriptimport { ref, watch } from 'vue';export default { setup() { const selectedOption = ref('A'); const message = ref(''); watch(selectedOption, (newValue) = { switch (newValue) { case 'A': message.value = 'Seleccionaste la Opción A'; break; case 'B': message.value = 'Seleccionaste la Opción B'; break; case 'C': message.value = 'Seleccionaste la Opción C'; break; default: message.value = ''; } }); return { selectedOption, message, }; },};/script

En este ejemplo, tenemos una selectedOptionreferencia enlazada a un menú desplegable de selección mediante v-model. También tenemos una messagereferencia que mostrará un mensaje según la opción seleccionada. Usamos un observador para supervisar la selectedOptionreferencia. Cada vez que cambia la opción seleccionada, se activa la función de devolución de llamada del observador y actualiza la messagereferencia según el valor seleccionado.

Al integrar referencias con observadores, puede realizar actualizaciones reactivas y activar acciones según los cambios en el estado de su componente. Los observadores ofrecen una forma eficaz de observar y responder a los cambios de datos en Vue 3.

Cambios y mejores prácticas para referencias en Vue 3

Veamos algunos cambios y mejoras introducidos en Vue 3 que cambiaron las formas en que usamos las referencias:

• La API de composición se introdujo en Vue 3 consetup()setup()Se considera la mejor manera de usar referencias. Para usar la API de Composición, setup()esta sirve como punto de entrada para definir el estado reactivo y los métodos de su componente .
• Referencias de plantillaSi está familiarizado con Vue 2, es fácil comprender cómo deberían verse las referencias de plantilla en Vue 3. En la API de Composition, debe declarar la referencia mediante la ref()función y exponerla a la plantilla.
• Referencias con reactividadLas referencias en Vue 3 son reactivas por defecto. Al cambiar el valor de una referencia mediante la .valuepropiedad del objeto, se produce una actualización reactiva dentro del componente, lo que provoca la renderización automática de las partes correspondientes de la plantilla.
• Mecanografía de referenciaVue 3 ofrece compatibilidad mejorada con TypeScript, incluyendo una mejor inferencia de tipos para referencias. Se puede especificar el tipo de una referencia mediante genéricos.const count = refnumber(0);

Conclusión

Este artículo exploró cómo referenciar elementos HTML en tu DOM en Vue.js. Ahora puedes acceder y registrar estos elementos mediante todas sus propiedades, incluyendo valor, nodo hijo, atributos de datos e incluso la URL base que los contiene.

Es importante tener en cuenta que las referencias se completan después de que se haya inicializado la instancia de Vue y se haya renderizado el componente, por lo que no se recomienda usar referencias en propiedades calculadas porque pueden manipular directamente los nodos secundarios.

¡Feliz hackeo!

Experimente sus aplicaciones Vue exactamente como lo hace un usuario

Depurar aplicaciones Vue.js puede ser difícil, especialmente cuando hay docenas, o incluso cientos, de mutaciones durante una sesión de usuario. Si te interesa monitorizar y rastrear las mutaciones de Vue para todos tus usuarios en producción, prueba LogRocket.

El complemento LogRocket Vuex registra las mutaciones de Vuex en la consola LogRocket, lo que le proporciona contexto sobre qué provocó un error y en qué estado se encontraba la aplicación cuando ocurrió un problema.

Modernice su forma de depurar sus aplicaciones Vue: comience a monitorearlas de forma gratuita .

Si quieres conocer otros artículos parecidos a Entendiendo las referencias en Vue puedes visitar la categoría Guias.