2. VUE. Reactividade e Ciclo de Vida dos compoñentes. Directivas

De MediaWiki
Ir a la navegación Ir a la búsqueda

Obxectivos da unidade

  • Comprender o concepto de reactividade en Vue.
  • Distinguir entre compoñentes funcionais e con estado.
  • Empregar ref() e reactive() para manexar datos.
  • Usar propiedades computed e o hook onMounted().

Reactividade en VUE

En Vue, a reactividadee significa que o framework é capaz de detectar automaticamente cando cambian os datos e actualizar a interface de usuario (DOM) sen recargar a páxina. Neste sendo, en Vue temos tres funcións básicas ref, reactive e computed para traballar a reactividade. Todas serven para crear variables reactivas, e dicir, cambian co seu valor e Vue actualiza automaticamente a interface.

Todas fan o mesmo pero no se usan igual ni serven exactamente para o mesmo.

Vémolo con un exemplo cada caso.

1. ref()

  • ref() manexa variables primitivas coma números, cadenas de texto, booleanos ou calquer valor simple incluíndo arrays simples que non formen parte de obxectos máis complexos.
  • Accedemos ao valor ca expresión .value
import { ref } from 'vue'; 
 
const contador = ref(0); 
contador.value++;           // Vue actualiza o DOM automaticamente

Imos crear un compoñente XestionUsuarios.vue, onde faremos as probas iniciais eliminando os compoñentes que houbera (ej. HelloWorld.vue).

O principio este compoñente será onde practicaremos estes conceptos básicos de Vue deixando tamén aparcado a aplicación de estilos web.

Con todo, hai que indicar os estilos dende a zona de style importánse así, con algunha das dúas opcións.

Opción 1: con class (recomendado por ser reutilizable) 

<div class="menu">Inicio</div> <div id="menu">Inicio</div> 
  <style scoped> 
    .nome { 
    color: blue; 
    font-weight: bold; 
    } 
  </style>


Opción 2: con id 

<div id="menu">Inicio</div> 
  <style scoped> 
    #nome { 
    color: blue; 
    font-weight: bold; 
    } 
  </style>

Volvendo a este compoñentes que estamos a crear. A estrutura sería algo así:

Por outra banda, como vimos na unidade anterior, App.vue é a raíz onde arranca a aplicación; por iso imos facer algún cambio nel para que se poida ver o novo compoñente.

Así que facemos as modificacións que se mostran na seguinte imaxe.

  • Non se nos esqueza de arrincar o servizo Vue, se non estivese iniciado.

  • O resultado co proxecto iniciado


Se pulsamos nos botóns irá cambiando o valor numérico executando o código situado na zona de script que mostra posteriormente na páxina sen que esta se recargue xa que vai chamando as funcións aumentar e restar asociadas aos botóns mediante @click

2. reactive

Usase para valores máis complexos como obxectos ou estruturas de datos.

Engadamos no compoñente XestionUsuarios.vue anterior os seguintes códigos marcados en vermello.

Podemos observar que temos unha estrutura de datos chamada xogador que imos a utilizar para manter os seus cambios con reactive tal como explicamos antes.

O máis importante é a outra diferencia máis entre ref y reactive:

  • A ref accedemos ao valor co termo .value, contador.value)
  • Con reactive accedemos a estrutura de datos co nome da mesma e o valor correspondente, neste caso xogador.puntuacion.

Resultado:

3. computed

As propiedades computed serven para calcular valores derivados, xeralmente a partires de outros datos reactivos de forma automática. É importante ter en conta que non almacena datos como poden facer reactive ou ref, senón que devolven un resultado que depende de outros.

Solo cando estes cambian computed actúa. Entre as súas vantaxes están a reutilización de código e mellora do rendemento xa que actúan só cando fai falla.

Neste caso observamos que a función computada que se chama estadoxogador depende dunha variable reactive.

O resultado antes:


E despois de chegar ao valor de puntuación 5:

Ciclo de vida dun compoñente. Directivas

En Vue, cada compoñente pasa por distintas fases desde que se crea ata que desaparece da pantalla. Esta fases forman o chamado ciclo de vida do compoñente.

As fases máis importantes son:

  • Creación: o compoñente é definido e prepara a súa lóxica interna, pero sen mostrarse aínda.
  • Montaxe: o compoñente xa está visible no DOM do navegador.
  • Actualización: cando cambian os datos reactivos, o compoñente vólvese a renderizar para mostrar os cambios.
  • Desmontaxe: o compoñentes elimínase do DOM.

Neste tipo de procesos hai un hook moi útil: onMounted(), que se executa automaticamente cando o compoñente xa está montado no DOM.

Nas versións actuais de Vue, especialmente usando script setup, moita lóxica inicial pódese executar directamente dentro do setup(), polo que algúns programadores empregan menos o hook.

Sen embargo, onMounted() segue sendo necesario cando necesitas acceder ao DOM,

facer peticións as APIs ou inicializar datos só despois de que o compoñente estea completamente cargado.

Resumindo, é o mecanismo ideal para:

  • Cargar os datos dende unha API, por exemplo, dende unha base de datos.
  • Iniciar temporizadores
  • Executar código que precise o compoñente cando estea visible na pantalla.

Antes de continuar, no almacén deste unidade hai dous arquivos modificados que se corresponden cos anteriores:

  • XestionUsuarios.vue que o cambiamos polo que modificamos antes
  • App.vue que ten lixeiras modificacións de estilo co respecto ao anterior.

Debemos incluílos no entorno substituíndo ao anterior para ir preparando o miniproxecto global. Tras a substitución e lanzamento do proxecto (npm run dev) debe aparecernos no navegador algo parecido a isto. 

IMPORTANTE. Non entraremos a explicar os estilos CSS que se propoñen para o deseño da páxina porque queda fora do alcance e obxectivo do curso. 
De feito, moitos deles son recollidos de outros proxectos realizados na aula, na Internet e, tamén, con algunha modificación con IA nalgún aspecto para a súa mellora, aínda que as veces hai que retocalos.

Volvendo os compoñentes, o que temos é un sinxelo formulario é debaixo unha listaxe que nos mostra o que imos engadindo no formulario. Ademais na dereita da táboa temos un lapis que é un botón para editar un usuario que se cargue na táboa, e un botón con unha icona dun cubo de lixo para eliminalo.

App.vue

Empecemos botando unha ollada a App.vue.

O arquivo raíz non ten nada especial ou diferente ao da unidade anterior que cargaba HelloWorld.vue. Neste caso script importa o compoñente que quero usar, XestionUsuarios.vue e na parte do style basicamente que apareza no centro ocupando o 80% do ancho e algunhas melloras de estilo adicionais como soporte inicial a dispositivos como tablets ou móbiles.

Este é o que menos tocaremos ao longo do proxecto. De feito só o tocaremos un par de veces máis e con modificacións mínimas nas unidades posteriores pero que afectarán de gran maneira ao resto de proxecto tal como pode sospeitar deste arquivo chave.

Xestionusuarios.vue

O que ten conceptos substanciais para entender o funcionamento de Vue é o XestionUsuarios.vue.

Pola súa lonxitude iremos por partes.

A. Template

Contén un formulario e debaixo unha táboa onde carga os datos que imos introducindo no formulario.

  • Parte correspondente ao form

  • Parte correspondente a táboa:

Directivas moi usadas

Chegados a este punto aparece outro dos conceptos clave na programación co framework Vue', que son as directivas, marcadas elas con subliñado vermello.

Vémolas:

v-model
vincula un dato do compoñente que é unha variable da zona do script, cun elemento dun formulario (input, select, textarea, etc.) de forma reactiva e bidireccional.

Isto quere dicir que, se cambias o valor no campo do formulario, a variable tamén cambia, e se modificas a variable no código, o formulario actualízase automaticamente.

Neste caso temos un modelo que chamamos novoUsuario coas súas variables: nome, correo, activo,... que aparece logo na declaración de datos do script.

v-if/v-else/ v-else-if
permite mostrar u ocultar partes del template segundo una condición lóxica, e dicir, quita e pon elementos do DOM.

Existe un similar, v-show solo oculta usando CSS con display:none, é más eficiente se cambias moito entre mostrar/ocultar.

v-bind ou simplemente " 
", que afecta ao botón e que permite ligar de forma reactiva un atributo HTML cun dato do compoñente.

É dicir, calquera atributo dun elemento (placeholder, disabled, class, title, src, etc.) pode "tomar" o seu valor dunha variable da zona do script. O comportamento é exactamente o mesmo: se a variable cambia, o atributo actualízase no navegador automaticamente.

Neste caso mentres non engada un nome e un dni o botón está deshabilitado.

Un exemplo: 

<td :style="{ color: u.edad >= 18 ? 'blue' : 'orange', fontWeight: 'bold' }"> {{ u.edad }} </td>

Se o usuario é maior de idade cor azul; senón cor laranxa e negrita

v-for
serve para amosar unha lista de elementos, repetindo unha parte do template (por exemplo, filas dunha táboa ou rexistros do usuario) por cada elemento dun array ou colección.

O atributo :key é moi importante para que Vue identifique cada elemento de maneira única e xestione mellor as actualizacións cando se recorre con for.

Outras diectivas

Existen varias directivas máis, pero por citar algunha das sinxelas, que non a usamos neste código.

v-on
que sustituiría a @ no botón:
v-on:click="engadirUsuario"
v-text
sustitúe a {{ }}
<p v-text="mensaxe"></p>
v-html
insire HTML (coidado con seguridade):
<div v-html="contidoHtml"></div>

Existe outras máis complexas, algunhas delas verémolas nas seguintes unidades.

En canto o resto do código resto xa é sintaxes de html e css.

B. Script.

Declaración de variables

Na primeira imaxe vemos a declaración de variables:

  • unha variable, o array usuarios, esta declarada como ref que xa se indicou que se fai para declarar variables reactivas de tipos de datos primitivos ou non moi complexos.
  • unha estrutura de datos complexa , novoUsuario, e polo tanto declarámola como reactive. Ademais é o "nexo de unión" ca zona de template, xa que coincide ca directiva

Calquer cambio na zona de script que afecta a novoUsuario veráse reflexada no template.

Na segunda imaxe vemos o hooked onMounted que se executa cando se carga o compoñente. Neste caso carga datos no array usuarios que declaramos na zona anterior cando se monta a páxina.

O v-for do template recorre a listaxe de usuarios e cárgaos na táboa, tal como se mostra.

  • Zona d edeclaracións varabia usuaurios (array usuarios) declarado como ref e estutura de datps novoUsuario coma reactive

  • Zona de ciclo de vida con hook onMounted

Hook onMounted

A segundo parte é o hook onMounted, que se executa cando se carga o compoñente.

Neste caso carga datos no array usuarios que declaramos na zona anterior cando se monta a páxina.

O v-for do template recorre a listaxe de usuarios e cárgaos na táboa.

Funcións

As seguinte imaxes teñen que ver cas funcións ou métodos que "fan algo".

A función gardarUsuario
o que fai mediante o método push, e cargar un novoUsuario no array usuarios, cando pulsamos o botón Gardar Usuario na zona do template.
A función eliminarUsuario
a través da clave index da táboa, elimina un usuario do array mediante a función splice que coincida co mencionado index.
A función editarUsuario
carga na variable usuario elixido co valor de index e asínao a novoUsuario, e como novoUsuario é una variable reactiva cárgao a súa vez no template, é dicir, no formulario. Recordemos unha vez máis, o v model novoUsuario é o "nexo de unión" entre a zona de JS e o template.

  • Métodos ou funcións

  • A función gardarUsuario

  • AS funcións editarUsuario e eliminarUsuario

Style

A parte de style non a comentamos porque non é tema deste curso de iniciación.

Outros hooks

Finalmente falamos do hook onMounted(). Non é o único, pero sí o máis empregado.

Na táboa seguinte móstranse outros.

Hook Momento do ciclo Cando se usa normalmente
onBeforeMounted() Xusto antes de montar o compoñente no DOM Preparar algo antes de que o compoñente se vexa na pantalla
onMounted() Cando o compoñente xa está montado no DOM Cargar datos, facer peticións, iniciar temporizadores ou librarías que necesitan o DOM
onBeforeUpdate() Antes de que o compoñente se actualice por un cambio reactivo Ver o valor antigo antes de que se renderice de novo ou realizar accións previas
onUpdate() Despois de que se actualice o DOM Realizar accións tras un cambio visual (animacións, scroll, etc.)
onBeforeUnmount() Antes de que o compoñente se desmonte (destruír) Limpar temporizadores, listeners, ou conexións abertas
onUnmounted() Cando o compoñente xa foi eliminado do DOM Confirmar que todo foi liberado correctamente
onActivated() Cada vez que o compoñente “volta á vida” despois de ter estado gardado en caché Recargar datos se é necesario. Reiniciar contadores, animacións ou estados que só teñen sentido cando o compoñente está visible.
onDeactivated() Cando o compoñente pasa a estar oculto pero non destruído, porque segue gardado Pausa temporizadores, garda estados ou cancela listeners cando paso a outra páxina.

Resumo

  • Comprendemos como Vue actualiza automaticamente a interfaz grazas á reactividade.
  • Aprendemos a usar ref, reactive e computed
  • Coñecemos as fases do ciclo de vida dun compoñente e o hook onMounted.
  • Aplicamos todo nun compoñente práctico cun formulario e unha táboa para mostrar os datos.

" Tarefa =

Recoméndase que:

  • execute a aplicación tras cada pequeno cambio
  • observe o comportamento no navegador
  • relacione cada modificación co concepto teórico correspondente

Exercicio 1 - Separación entre datos e eventos

Engadir un botón que permita limpar o formulario sen afectar á lista de usuarios. O botón chamará a unha función limparForm().

Exercicio 2 - Aplicación de estilos diferentes dependendo ligados aos datos

Aplicar estilos distintos ás filas da táboa segundo o tipo de usuario:

  • Empresa: fondo verde suave ou similar
  • Particular: fondo amarelo suave ou similar

Exercicio 3 - Atributos HTML reactivos dun dato temporal, non da lista completa

Modificar o campo de texto do nome para que a cor do bordo dependa do tipo de conta seleccionada.

Axuda: 

<input
  v-model="novoUsuario.nome"
  type="text"
  required
  :style="{ borderColor: novoUsuario.tipoCuenta === 'empresa' ? 'green' : 'red' }"
/>

Na zona de style: 

input {
  transition: border-color 0.3s ease;
}

Exercicio 4. Datos derivados e reactividade

A partir do array reactivo usuarios, mostrar no encabezado da táboa o número de usuarios activos e inactivos actualizándose de forma automática ao engadir ou eliminar usuarios a partires do array 

LISTAXE DE USUARIOS — Usuarios activos: 2 | Inactivos: 1

Non é obrigatorio empregar computed, pero recoméndase reflexionar sobre que datos deben almacenarse e cales poden derivarse doutros. 

Axuda.
Usar filter para construir unha subarray cos activos e logo con length calcular o tamaño de ese subarray

const resultado = elementos.filter(e => /* condición */)
console.log(resultado.length)

Se modificamos un usuario a súa condición de activo vemos como a aplicación actúa de forma reactiva e modifica o número de usuarios.

Obtenido de «https://wiki.cifprodolfoucha.es/index.php?title=2._VUE._Reactividade_e_Ciclo_de_Vida_dos_compoñentes._Directivas&oldid=24558»