Ciclo de vida

Ciclo de vida

Alpine.js proporciona hooks como x-init para ejecutar código cuando el componente se inicializa.

Hooks y ciclo de vida en Alpine.js

Alpine.js permite ejecutar código en diferentes momentos del ciclo de vida de un componente usando directivas y métodos especiales.

1. x-init

Ejecuta código cuando el componente se inicializa. Útil para inicializar datos, hacer peticiones o configurar listeners.

Ejemplo x-init

<div x-data x-init="console.log('Componente listo')">
...
</div>

2. @alpine:init

Escucha el evento global que se dispara cuando Alpine se inicializa en la página.

Evento global alpine:init

<script @alpine:init="console.log('Alpine inicializado')"></script>

3. x-effect

Ejecuta una expresión cada vez que cambian las dependencias reactivas usadas dentro de ella (efecto secundario reactivo).

Ejemplo x-effect

<div x-data="{ count: 0 }">
<button @click="count++">Incrementar</button>
<span x-effect="console.log(count)"></span>
</div>

4. x-ignore

Evita que Alpine.js procese un elemento y sus hijos, útil para integrar con otros frameworks o scripts.

Ejemplo x-ignore

<div x-ignore>
<script>/* Este bloque no será procesado por Alpine */</script>
</div>

5. x-ref y $refs

Permite referenciar elementos del DOM para manipularlos desde el código Alpine.

Ejemplo x-ref y $refs

<div x-data="{ focusInput() { this.$refs.input.focus() } }">
<input x-ref="input" type="text" />
<button @click="focusInput()">Foco</button>
</div>

6. x-cloak

Oculta elementos hasta que Alpine.js haya terminado de inicializarlos, evitando parpadeos de contenido.

Ejemplo x-cloak

<div x-data x-cloak>
<p>Este contenido se muestra solo cuando Alpine está listo.</p>
</div>
<style>
[x-cloak] { display: none; }
</style>

7. x-teleport

Permite renderizar un elemento en otra parte del DOM, útil para modales, tooltips, etc.

Ejemplo x-teleport

<div x-data="{ open: false }">
<button @click="open = true">Abrir modal</button>
<div x-teleport="#modales" x-show="open">
  <p>¡Soy un modal!</p>
  <button @click="open = false">Cerrar</button>
</div>
</div>
<div id="modales"></div>

8. x-id

Genera identificadores únicos para elementos, útil para accesibilidad y relaciones entre elementos.

Ejemplo x-id

<div x-data="{ id: $id('input') }">
<label :for="id">Nombre</label>
<input :id="id" type="text" />
</div>

9. x-effect avanzado

Puedes usar x-effect para ejecutar efectos secundarios complejos:

x-effect avanzado

<div x-data="{ count: 0 }">
<button @click="count++">Sumar</button>
<span x-effect="if(count > 5) alert('¡Más de 5!')"></span>
</div>

10. $nextTick

Permite ejecutar código después de que Alpine haya actualizado el DOM.

Uso de $nextTick

<div x-data="{ mensaje: '' }">
<input x-model="mensaje" @input="$nextTick(() => console.log('DOM actualizado'))" />
</div>

Tip

Consulta la documentación oficial para más detalles sobre hooks y ciclo de vida en Alpine.js.