Cycle de vie

Alpine propose plusieurs techniques pour se brancher sur les différentes étapes de son cycle de vie. Passons en revue les plus utiles :

Initialisation d'un élément

Un autre point d'accroche très utile dans Alpine est la directive x-init.

x-init peut être ajoutée à n'importe quel élément de la page et exécutera le JavaScript qu'elle contient lorsqu'Alpine commence à initialiser cet élément.

<button x-init="console.log('Initialisation en cours')">

En plus de la directive, Alpine appelle automatiquement toute méthode init() stockée dans un objet de données. Par exemple :

Alpine.data('dropdown', () => ({
    init() {
        // Cette méthode est appelée avant l'initialisation de l'élément qui utilise ces données.
    }
}))

Après un changement d'état

Alpine permet d'exécuter du code lorsqu'une donnée (un état) change. Deux API existent pour cela : $watch et x-effect.

$watch

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">

Comme vous le voyez, $watch permet de réagir aux changements d'une donnée désignée par une clé en notation pointée. Lorsque cette donnée change, Alpine appelle la fonction de rappel fournie et lui passe la nouvelle valeur, ainsi que l'ancienne valeur avant le changement.

→ En savoir plus sur $watch

x-effect

x-effect utilise le même mécanisme que $watch en coulisses, mais s'utilise très différemment.

Au lieu de préciser quelle clé de données observer, x-effect exécute le code fourni et détecte intelligemment toutes les données Alpine qui y sont utilisées. Lorsqu'une de ces données change, l'expression x-effect est ré-exécutée.

Voici le même code que dans l'exemple $watch, réécrit avec x-effect :

<div x-data="{ open: false }" x-effect="console.log(open)">

Désormais, cette expression est appelée immédiatement, puis à nouveau à chaque modification de open.

Les deux principales différences de comportement avec cette approche sont :

1. Le code fourni s'exécute immédiatement ET lors des changements de données ($watch est « paresseux » : il n'agit qu'au premier changement).
2. L'ancienne valeur n'est pas connue. (La fonction passée à $watch reçoit à la fois la nouvelle valeur ET l'ancienne.)

→ En savoir plus sur x-effect

Initialisation d'Alpine

alpine:init

Il est souvent nécessaire d'exécuter du code après le chargement d'Alpine, mais AVANT son initialisation sur la page.

Ce point d'accroche permet d'enregistrer des données, directives, magics, etc. personnalisés avant qu'Alpine ne fasse son travail sur la page.

Vous pouvez vous brancher sur cette étape du cycle de vie en écoutant un événement émis par Alpine : alpine:init

document.addEventListener('alpine:init', () => {
    Alpine.data(...)
})

alpine:initialized

Alpine propose aussi un point d'accroche pour exécuter du code APRÈS la fin de son initialisation, nommé alpine:initialized :

document.addEventListener('alpine:initialized', () => {
    //
})

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev