x-init

Директива x-init позволяет вам подключиться к фазе инициализации любого элемента в Alpine.

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

В приведённом выше примере «Инициализируюсь!» будет выведено в консоль перед дальнейшими обновлениями DOM.

А вот другой пример, где x-init используется для получения некоторого JSON и сохранения его в x-data перед обработкой компонента:

<div
  x-data="{ posts: [] }"
  x-init="posts = await (await fetch('/posts')).json()"
>...</div>

$nextTick

Иногда вам нужно подождать, пока Alpine полностью завершит отрисовку, чтобы выполнить какой-либо код.

Это будет что-то вроде useEffect(..., []) в React или mount во Vue.

Используя внутреннюю магию Alpine $nextTick, вы можете добиться этого.

<div x-init="$nextTick(() => { ... })"></div>

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

Автономный `x-init`

Вы можете добавить x-init к любым элементам внутри или за пределами HTML-блока x-data. Например:

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

<span x-init="console.log('Я тоже инициализируюсь!')"></span>

<strong>Загляните в консоль</strong>

Загляните в консоль

Автовыполнение метода `init()`

Если объект x-data компонента содержит метод init(), он будет вызван автоматически. Например:

<div
  x-data="{
    init() {
        console.log('Я запущен автоматически!')
    }
}"
>
  ...
</div>

Это также относится к компонентам, которые были зарегистрированы с использованием синтаксиса Alpine.data().

Alpine.data('dropdown', () => ({
  init() {
    console.log('Я запускаюсь при инициализации каждого компонента «выпадающего списка».');
  },
}));

Если у вас есть объект x-data, содержащий метод init() и директиву x-init, метод x-data будет вызываться перед директивой.

<div
  x-data="{
        init() {
            console.log('Я запустился первым!')
        }
    }"
  x-init="console.log('Я запустился вторым!')"
>
  ...
</div>

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

Как выполнить какой-то код в Alpine только после отрисовки элемента?
1. <div x-init="$nextTick(() => { ... })"></div>
2. <div x-init="$useEffect(() => { ... })"></div>
3. <div x-init="$onMount(() => { ... })"></div>

Какая из строчек отобразится в консоли?

<span x-init="console.log('Строчка 2')"></span>

<div x-data>
  <span x-init="console.log('Строчка 1')"></span>
</div>

x-init

$nextTick

Автономный x-init

Автовыполнение метода init()

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

Автономный `x-init`

Автовыполнение метода `init()`