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>

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

Вопрос 1

Как выполнить какой-то код в Alpine только после отрисовки элемента?

• Вызов $nextTick

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

  $nextTick откладывает колбэк до момента, когда Alpine закончит отрисовку DOM.

• Вызов $useEffect

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

  useEffect — это хук React, магического свойства $useEffect в Alpine нет.

• Вызов $onMount

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

  Свойства $onMount в Alpine не существует, аналог mount из Vue — это $nextTick.

Вопрос 2

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

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

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

• Только 1

  Вложенный x-init действительно сработает, но он не единственный на странице.

• Обе

  x-init работает и внутри x-data, и за его пределами, поэтому выведутся обе строчки.

• Только 2

  Автономный x-init не отменяет работу директивы внутри компонента.

Прогресс викторины

0 / 0 вопросов отвечено (0%)

0 верно