使用script标签时Alpine.data()定义Key报undefined错误

云上老周

2026-8-27

问题原因

抛product is not defined错的本质很简单：Alpine扫到x-data="product"的时候，根本没找到你通过Alpine.data()注册的同名组件，只能去全局作用域捞叫product的变量，捞不到就直接报错。结合你给Alpine加了defer属性的场景，基本是两个问题导致的：

脚本执行顺序错误。带defer的外部脚本本来就会等整个DOM解析完才按标签顺序执行，要是你自己写注册逻辑的script要么加了async、要么设成了type="module"、要么放的位置太靠后，就会出现Alpine已经初始化完、触发完alpine:init、甚至已经把整个DOM的Alpine指令都扫完了，你的注册代码才刚跑，product组件根本没赶上注册，自然找不到。
注意：type="module"的脚本默认是延迟执行的，执行时机比普通defer脚本还晚；async属性的脚本下载完就立刻跑，完全不管标签顺序，这两种写法都很容易错过Alpine的初始化事件。
回调执行中断。你现在写的this.count = this.count++本身就是逻辑错误——后置++是先返回变量当前的旧值，再给变量加1，你把返回的旧值重新赋值给count，相当于点了加减按钮count也永远卡在1，虽然这个错误不会直接导致组件找不到，但如果你回调里Alpine.data()调用之前有其他报错，会直接把整个回调卡断，组件自然注册不上。

修复方法

按下面的步骤调整，基本就能解决：

先把脚本顺序和属性捋对
把Alpine的引入脚本放到<head>里，保留defer属性；紧接着在Alpine标签后面写你注册组件的内联脚本，别给这个内联脚本加async、别加type="module"，保证DOM解析到这里的时候就把alpine:init的事件监听绑好。页面里用x-data="product"的DOM元素统一放在<body>里，不要跑到注册脚本前面。
正确的结构参考：

<head>
  <!-- 先引Alpine，保留defer -->
  <script defer src="你的alpinejs@3.10.2本地或CDN文件地址"></script>
  <!-- 紧接着写注册逻辑，不要加任何延迟执行的属性 -->
  <script>
    document.addEventListener('alpine:init', () => {
      Alpine.data('product', () => ({
        count: 1,
        // 把之前错误的赋值去掉，直接自增自减就行
        increment() {
          this.count++
        },
        decrement() {
          this.count--
        }
      }))
    })
  </script>
</head>
<body>
  <!-- DOM放在脚本后面 -->
  <div x-data="product" class="product">
    ...
  </div>
</body>

检查Django模板的转义问题
如果调完顺序还是报错，看看你写Alpine代码的部分有没有被Django模板引擎误转义，必要的时候用{% verbatim %}标签把Alpine相关的DOM和脚本包起来，避免模板引擎把指令里的特殊符号解析成模板语法。
快速排查技巧
要是拿不准回调有没有正常执行，就在alpine:init回调第一行加一句console.log('初始化触发')，开浏览器控制台看有没有这句输出，没有的话就说明事件绑晚了，继续调整脚本位置即可。

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