生命周期

Alpine 提供了几种不同的技术来钩入其生命周期的不同部分。让我们了解一些最有用的方法：

元素初始化

另一个非常有用的生命周期钩子是 x-init 指令。

x-init 可以添加到页面上的任何元素，当 Alpine 开始初始化该元素时，会执行你在其中调用的任何 JavaScript。

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

除了指令之外，Alpine 还会自动调用存储在数据对象上的任何 init() 方法。例如：

Alpine.data('dropdown', () => ({
    init() {
        // 我在使用此数据的元素初始化之前被调用
    }
}))

Alpine 允许你在数据（状态）发生变化时执行代码。它提供了两种不同的 API 来实现这一功能：$watch 和 x-effect。

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

如上所示，$watch 允许你通过点号表示法的 key 来钩入数据变化。当该数据发生变化时，Alpine 会调用传入的回调函数，并将新值传递给它，同时还会传递变更前的旧值。

x-effect 在底层使用与 $watch 相同的机制，但用法非常不同。

x-effect 不需要指定要监听哪个数据 key，而是会执行提供的代码并智能地查找其中使用的任何 Alpine 数据。当这些数据中的某一项发生变化时，x-effect 表达式将重新执行。

以下是使用 x-effect 重写的 $watch 示例中的相同代码：

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

现在，这个表达式会立即执行，并在每次 open 更新时重新执行。

这两种方法的主要行为差异如下：

确保在 Alpine 加载后、但在它在页面上初始化之前执行一些代码是一项必要的任务。

这个钩子允许你在 Alpine 在页面上执行操作之前注册自定义数据、指令、魔法属性等。

你可以通过监听 Alpine 派发的一个名为 alpine:init 的事件来钩入生命周期的这个节点：

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

Alpine 还提供了一个钩子，让你在它完成初始化之后执行代码，名为 alpine:initialized：

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