你如何激活alpinejs？答案

【问题标题】：How do you activate alpinejs?你如何激活alpinejs？
【发布时间】：2021-07-18 00:25:26
【问题描述】：

我正在尝试将 AlpineJS 添加到我正在处理的一个非常简单的 html 页面中，并且正在执行包（来自 cdn），但它似乎没有被正确激活。即使在这个 HTML 的小 sn-p 上，它也不起作用：

<html>
    <head>
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
    </head>
    <body>
        <h1 x-show="false">hide me</h1> <!-- doesn't work-->
    </body>
    <script type="text/javascript">
        console.log($el); //undefined
    </script>
</html>

这也被加载到可以观察到问题的代码笔中：https://codepen.io/dwarburt/pen/gOgZyeR

我确定我只是错过了一步，但会是什么？ AlpineJS 正在执行其初始化例程，您可以从调试器中得知。

【问题讨论】：

标签： javascript alpine.js

【解决方案1】：

要初始化 AlpineJs 组件，您需要父容器上的 x-data 属性：

<div x-data="{
    isShowing: false
}">
    <h1 x-show="isShowing">I am hidden</h1>
</div>

这包含一个具有您可以在组件实例中使用的属性和函数的对象。

这里的 repo 中的文档绝对值得一读：https://github.com/alpinejs/alpine#use

【讨论】：

谢谢，我当然已经阅读了这些文档。这些示例显示带有x-data 的父元素，但我不知道这是必需的，即使您的子组件不会使用 x-data 对象。在我将x-data（只是没有值的属性）添加到父元素之后，x-show="false" 指令开始像我预期的那样工作。为什么它会这样工作？而且，$el 仍然未定义，为什么会这样？ codepen.io/dwarburt/pen/QWdzXvK
爬取整个 DOM 以查找大量标签和指令的成本很高，因此x-data 让 AlpineJs 知道页面的特定部分是 AlpineJs 组件；性能更高。为了console.log 和$el，您需要在组件内执行此操作。我会看一下x-init，它在组件初始化时运行x-init="console.log($el)"：github.com/alpinejs/alpine#x-init
那么，难道不是必须爬取整个 DOM 才能找到任何 x-data 元素吗？
当然，但是x-data 标记了页面中 AlpineJs 感知的较小部分。一旦你有了这些部分，你就可以更有效地遍历树的一小部分，涉及所有其余的查询。