为什么AlpineJS的@click点击处理函数会两次调用console.log？

你给出的测试代码如下：

<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{ }">
  <button @click="console.log('Click!')">Click it!</button>
</div>

这段代码本身的逻辑是正常的，单次点击只会输出1次日志，如果出现多次输出的情况，大概率是以下几种常见原因：

• AlpineJS实例重复初始化

  最常见的诱因是页面中多次引入了AlpineJS的CDN脚本，或是你在其他前端框架的组件生命周期中重复注册了Alpine实例。Alpine每完成一次初始化，都会给页面上的@click绑定一次事件回调，初始化多少次，点击时就会触发多少次日志输出。

• 额外的事件冒泡触发

  如果你实际的业务代码中，按钮外层有其他绑定了点击事件的DOM节点，且没有做事件冒泡拦截，外层绑定的回调也可能输出日志。可以先单独运行上述测试代码，排除其他自定义事件的干扰。

• 浏览器扩展/调试工具的注入干扰

  部分带有页面注入能力的浏览器扩展、用户脚本，或是调试器的事件监听功能，可能会重复触发DOM的点击事件。可以切换到浏览器无痕模式运行测试，确认是否是扩展导致的问题。

• 组件重复挂载

  如果你在单页应用场景下使用这段代码，对应带x-data属性的DOM节点被重复挂载渲染了多次，相当于页面上存在多个相同的按钮实例，点击时所有绑定的回调都会执行。

你可以通过浏览器元素检查器的「事件监听器」面板，选中按钮后统计绑定的click事件回调数量，直接定位是否是重复绑定的问题。

内容的提问来源于stack exchange，提问作者jaime