Lifecycle

Alpine has a handful of different techniques for hooking into different parts of its lifecycle. Let's go through the most useful ones to familiarize yourself with:

Element initialization

Another extremely useful lifecycle hook in Alpine is the x-init directive.

x-init can be added to any element on a page and will execute any JavaScript you call inside it when Alpine begins initializing that element.

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

In addition to the directive, Alpine will automatically call any init() methods stored on a data object. For example:

Alpine.data('dropdown', () => ({    init() {        // I get called before the element using this data initializes.    }}))
Alpine.data('dropdown', () => ({
    init() {
        // I get called before the element using this data initializes.
    }
}))

After a state change

Alpine allows you to execute code when a piece of data (state) changes. It offers two different APIs for such a task: $watch and x-effect.

`$watch`

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">

As you can see above, $watch allows you to hook into data changes using a dot-notation key. When that piece of data changes, Alpine will call the passed callback and pass it the new value. along with the old value before the change.

→ Read more about $watch

`x-effect`

x-effect uses the same mechanism under the hood as $watch but has very different usage.

Instead of specifying which data key you wish to watch, x-effect will call the provided code and intelligently look for any Alpine data used within it. Now when one of those pieces of data changes, the x-effect expression will be re-run.

Here's the same bit of code from the $watch example rewritten using x-effect:

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

Now, this expression will be called right away, and re-called every time open is updated.

The two main behavioral differences with this approach are:

The provided code will be run right away AND when data changes ($watch is "lazy" -- won't run until the first data change)
No knowledge of the previous value. (The callback provided to $watch receives both the new value AND the old one)

→ Read more about x-effect

Alpine initialization

`alpine:init`

Ensuring a bit of code executes after Alpine is loaded, but BEFORE it initializes itself on the page is a necessary task.

This hook allows you to register custom data, directives, magics, etc. before Alpine does its thing on a page.

You can hook into this point in the lifecycle by listening for an event that Alpine dispatches called: alpine:init

document.addEventListener('alpine:init', () => {    Alpine.data(...)})
document.addEventListener('alpine:init', () => {
    Alpine.data(...)
})

`alpine:initialized`

Alpine also offers a hook that you can use to execute code AFTER it's done initializing called alpine:initialized:

document.addEventListener('alpine:initialized', () => {    //})
document.addEventListener('alpine:initialized', () => {
    //
})

← Events

x-data →

Code highlighting provided by Torchlight