Alpine.js：x-data内的magic函数为何不具备响应性？

这是正常行为吗？ #

是，这属于正常行为。x-data中的属性初始赋值只会在组件初始化时执行一次，后续$pageScroll内部的data.ratio更新时，不会自动同步到组件的scroll属性——因为这个属性只是存储了初始化时的静态值，没有建立响应式依赖关联。

解决响应性问题 #

方案1：使用组件内计算属性 #

把scroll定义为getter函数，每次访问都会重新调用$pageScroll，Alpine会自动跟踪data.ratio的响应式变化：

<div class="fixed top-0 right-0 w-4 bg-green-500 duration-100"
     x-data="{ get scroll() { return $pageScroll(100); } }"
     x-bind:style="{ height: scroll + '%' }"
     x-text="scroll">
</div>

方案2：手动监听滚动更新 #

在组件内部通过x-init监听全局滚动事件，手动更新scroll属性：

<div class="fixed top-0 right-0 w-4 bg-green-500 duration-100"
     x-data="{ scroll: $pageScroll(100) }"
     x-init="window.addEventListener('scroll', () => scroll = $pageScroll(100), { passive: true })"
     x-bind:style="{ height: scroll + '%' }"
     x-text="scroll">
</div>

方案1更符合Alpine的响应式设计理念，代码更简洁。

关于重复事件监听器的性能问题 #

你的担心其实是多余的：当前魔法函数的事件监听器是在插件初始化阶段（即export default (Alpine) => { ... }执行时）全局注册的，只会绑定一次load和scroll事件，和模板中使用多少次$pageScroll无关。

如果想要进一步优化，可以把滚动逻辑整合到Alpine的响应式生命周期中，更贴合框架生态：

/**
 * @param {import("alpinejs").Alpine} Alpine
 */
export default (Alpine) => {
  let ratio = Alpine.reactive({ value: 0 });

  const calculate = () => {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    return scrollTop / (scrollHeight - clientHeight) || 0;
  };

  const update = () => { ratio.value = calculate(); };

  // 用Alpine初始化钩子确保监听器只注册一次
  Alpine.onInit(() => {
    window.addEventListener('load', update);
    window.addEventListener('scroll', update, { passive: true });
  });

  Alpine.magic('pageScroll', () => (scale, round) => {
    let value = ratio.value;
    if (!isNaN(scale)) value *= scale;
    if (!isNaN(round)) value = value.toFixed(round);
    return value;
  });
};

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