x-effect

x-effect — полезная директива для повторного анализа выражения при изменении одной из его зависимостей. Вы можете думать о нём как о наблюдателе, где вам не нужно указывать, какое свойство отслеживать, он будет отслеживать все используемые в нём свойства.

Если это определение сбивает вас с толку, ничего страшного. Лучше объяснить на примере:

<div x-data="{ label: 'Привет' }" x-effect="console.log(label)">
  <button @click="label += ', мир!'">Изменить сообщение</button>
</div>

Изменить сообщение

Когда этот компонент будет загружен, выполнится выражение x-effect и в консоли появится сообщение «Привет».

Поскольку Alpine знает обо всех ссылках на свойства, содержащихся в x-effect, при нажатии кнопки и изменении label эффект будет запущен повторно и в консоль будет выведено «Привет, мир!». Если не обновлять страницу, строчка «, мир!» будет добавляться к предыдущей строке. Откройте консоль браузера и убедитесь сами.