x-init

x-init 指令允许你在 Alpine 中任何元素的初始化阶段注入代码。

<div x-init="console.log('I\'m being initialized!')"></div>

在上面的示例中，在进行进一步的 DOM 更新之前，控制台将输出 "I\'m being initialized!"。

再看另一个示例，在组件处理之前，使用 x-init 来获取一些 JSON 数据并存储到 x-data 中。

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

$nextTick

有时，你需要等到 Alpine 完全完成渲染后才执行某些代码。

这类似于 React 中的 useEffect(..., [])，或 Vue 中的 mount。

使用 Alpine 内部的 $nextTick 魔术属性可以实现这一点。

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

独立的 x-init

你可以将 x-init 添加到 x-data HTML 块内部或外部的任何元素上。例如：

<div x-data>
    <span x-init="console.log('I can initialize')"></span>
</div>

<span x-init="console.log('I can initialize too')"></span>

自动执行 init() 方法

如果组件的 x-data 对象包含一个 init() 方法，它将自动被调用。例如：

<div x-data="{
    init() {
        console.log('I am called automatically')
    }
}">
    ...
</div>

对于使用 Alpine.data() 语法注册的组件也是如此。

Alpine.data('dropdown', () => ({
    init() {
        console.log('I will get evaluated when initializing each "dropdown" component.')
    },
}))

如果你同时拥有包含 init() 方法的 x-data 对象和 x-init 指令，那么 x-data 中的方法将先被调用，然后才是指令。

<div
    x-data="{
        init() {
            console.log('I am called first')
        }
    }"
    x-init="console.log('I am called second')"
    >
    ...
</div>