x-effect

x-effect est une directive utile pour réévaluer une expression lorsque l'une de ses dépendances change. Vous pouvez l'imaginer comme un observateur (watcher) pour lequel vous n'avez pas à préciser quelle propriété surveiller : il surveille toutes les propriétés utilisées à l'intérieur de l'expression.

Si cette définition vous paraît confuse, ce n'est pas grave. Un exemple l'explique mieux :

<div x-data="{ label: 'Bonjour' }" x-effect="console.log(label)">
    <button @click="label += ' le monde !'">Changer le message</button>
</div>

Au chargement de ce composant, l'expression de x-effect est exécutée et « Bonjour » est affiché dans la console.

Comme Alpine connaît toutes les références de propriétés contenues dans x-effect, lorsque le bouton est cliqué et que label change, l'effet est déclenché à nouveau et « Bonjour le monde ! » est affiché dans la console.

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