Жизненный цикл

У Alpine есть несколько различных методов подключения к различным частям жизненного цикла. Пройдемся по наиболее полезным для ознакомления:

Инициализация элемента

Ещё один чрезвычайно полезный крючок жизненного цикла в Alpine — директива x-init.

x-init может быть добавлен к любому элементу на странице и будет выполнять любой JavaScript, который вы вызываете внутри него, когда Alpine начинает инициализировать этот элемент.

<button x-init="console.log('Инициализируюсь')"></button>

В дополнение к директиве Alpine автоматически вызовет любые методы init(), хранящиеся в объекте данных. Например:

Alpine.data('dropdown', () => ({
  init() {
    // Меня вызывают до инициализации элемента, использующего эти данные.
  },
}));

После изменения состояния

Alpine позволяет выполнять код при изменении фрагмента данных (состояния). Для такой задачи он предлагает два разных API: $watch и x-effect.

`$watch`

<div
  x-data="{ open: false }"
  x-init="$watch('open', value => alert('open = ' + value))"
>
  <button @click="open = !open">Нажать</button>
</div>

Как вы можете видеть выше, $watch позволяет вам отслеживать изменения данных с помощью ключа точечной записи. Когда этот фрагмент данных изменится, Alpine вызовет переданный обратный вызов и передаст ему новое значение. вместе со старым значением до изменения.

Подробнее о $watch

`x-effect`

x-effect использует тот же механизм, что и $watch, но имеет совсем другое применение.

Вместо того, чтобы указывать, какой ключ данных вы хотите просмотреть, x-effect вызывает предоставленный код и разумно ищет любые данные Alpine, используемые в нем. Теперь, когда один из этих фрагментов данных изменится, выражение x-effect будет запущено повторно.

Вот тот же фрагмент кода из примера $watch, переписанный с использованием x-effect:

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

Теперь это выражение будет вызываться сразу и повторно вызываться каждый раз при обновлении open.

Двумя основными поведенческими различиями этого подхода являются:

Предоставленный код будет запущен сразу И при изменении данных ($watch является «ленивым» — не запускается до первого изменения данных)
Нет информации о предыдущем значении. (Обратный вызов, предоставленный $watch, получает как новое значение, так и старое)

Подробнее об x-effect

Инициализация Alpine

alpine:init

Необходимо обеспечить выполнение небольшого кода после загрузки Alpine, но до его инициализации на странице.

Этот хук позволяет вам регистрировать пользовательские данные, директивы, магические функции и т. д. ДО того, как Alpine выполнит свою работу на странице.

Вы можете подключиться к этой точке жизненного цикла, прослушивая событие, которое отправляет Alpine:
```
document.addEventListener('alpine:init', () => {
    Alpine.data(...)
})
```
alpine:initialized

Alpine также предлагает хук, который можно использовать для выполнения кода ПОСЛЕ завершения инициализации:
```
document.addEventListener('alpine:initialized', () => {
  console.log('Инициализация завершена')
});
```

Проверка знаний

Какой из указанных вариантов синтаксиса неверен?

<button x-init="console.log('...')"></button>

Alpine.init('dropdown', () => ({
  mount() {
    // ...
  },
}));

Alpine.data('dropdown', () => ({
  init() {
    // ...
  },
}));