Shopify主题编辑器中区块重渲染时事件监听器堆叠问题咨询

问题结论 #

这种事件监听器堆叠的情况不是预期行为，属于代码逻辑漏洞。如果用轮播组件，用户修改10次后，确实会残留10个轮播实例——旧实例没被销毁，新实例不断创建，最终导致交互混乱、编辑器性能下降。

问题原因 #

Shopify主题编辑器修改区块时，会重新加载该区块的HTML和JS代码。你当前用匿名函数绑定了全局的shopify:section:load/unload事件，每次重新加载都会新增一个监听器，且旧监听器无法被移除，触发次数自然随修改次数递增。

解决方法 #

1. 用命名函数替代匿名函数，配合卸载事件清理监听器 #

<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log("Shows in live");
    initSection();
  });

  // 封装区块初始化逻辑
  function initSection() {
    const sectionEl = document.querySelector('[data-section-id="{{ section.id }}"]');
    if (!sectionEl) return;
    // 这里放轮播等组件的初始化代码，比如：
    // new Swiper(sectionEl.querySelector('.swiper-container'), { /* 配置项 */ });
  }

  if (Shopify.designMode) {
    // 用命名函数，方便后续移除
    function onSectionLoad(event) {
      if (event.detail.sectionId === '{{ section.id }}') {
        console.log("Hello World");
        initSection();
      }
    }

    function onSectionUnload(event) {
      if (event.detail.sectionId === '{{ section.id }}') {
        console.log("Section unload");
        // 销毁当前区块的组件实例，比如轮播：
        // const swiperInstance = Swiper.getInstance(document.querySelector('[data-section-id="{{ section.id }}"] .swiper-container'));
        // if (swiperInstance) swiperInstance.destroy(true, true);
        
        // 移除监听器，避免堆叠
        document.removeEventListener('shopify:section:load', onSectionLoad);
        document.removeEventListener('shopify:section:unload', onSectionUnload);
      }
    }

    document.addEventListener('shopify:section:load', onSectionLoad);
    document.addEventListener('shopify:section:unload', onSectionUnload);
  }
</script>

<!-- 务必在区块根元素添加标识属性 -->
<div data-section-id="{{ section.id }}">
  <!-- 区块内容 -->
</div>

2. 关键注意点 #

• 不要用匿名函数绑定全局事件：匿名函数无法被定位移除，会一直占用内存
• 卸载事件中必须清理资源：销毁组件实例、移除对应监听器，从根源避免堆叠
• 组件初始化绑定到区块元素：确保每个实例只关联当前区块，卸载时能被正确回收

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