Vue3中Swiper滑出屏幕后引用实例被标记为destroyed的问题咨询

一、destroyed 属性触发场景 #

Swiper实例的destroyed变为true，主要有以下几种情况：

• 组件被Vue虚拟DOM卸载（比如通过v-if切换、组件被移出DOM树），Swiper内部逻辑标记实例已销毁，但DOM元素可能未被移除。
• 手动调用了swiper.destroy()方法，实例失效但DOM仍保留。
• Vue响应式更新导致DOM重构，原实例绑定的DOM被替换，旧实例被标记为销毁，新实例生成但未更新引用。

二、你的问题原因 #

你在onMounted中一次性获取Swiper实例，当Swiper所在DOM因响应式操作（比如滑出屏幕触发的显示/隐藏、DOM重排）变化时，原实例被Swiper内部标记为destroyed，但DOM元素未被移除，所以仍能手动交互，但旧实例引用已失效，调用slideNext()无反应。

三、优化方案 #

1. 用Vue模板引用替代原生DOM查询 #

放弃document.querySelector，直接在模板中给Swiper组件加ref，确保获取的是Vue管理的实例：

<template>
  <swiper class="swiper" ref="swiperRef">
    <!-- 轮播项内容 -->
  </swiper>
</template>

<script setup>
import { ref, onMounted } from 'vue';
const swiperRef = ref(null);
let mySwiper = null;

onMounted(() => {
  mySwiper = swiperRef.value?.swiper;
});
</script>

2. 动态更新实例引用 #

在调用slideNext()前，先检查实例状态，失效则重新获取：

const handleSlideNext = () => {
  let targetSwiper = mySwiper;
  if (!targetSwiper || targetSwiper.destroyed) {
    targetSwiper = swiperRef.value?.swiper;
    mySwiper = targetSwiper;
  }
  targetSwiper?.slideNext();
};

如果Swiper有显示/隐藏状态切换，可通过watch监听状态，在可见时重新获取实例：

import { watch } from 'vue';
const isSwiperVisible = ref(true); // 控制Swiper显示的变量

watch(isSwiperVisible, (isVisible) => {
  if (isVisible) {
    // 延迟确保DOM渲染完成
    setTimeout(() => {
      mySwiper = swiperRef.value?.swiper;
    }, 0);
  }
});

3. 监听Swiper销毁事件 #

绑定destroy事件，在实例销毁时重置引用，避免后续使用失效实例：

onMounted(() => {
  mySwiper = swiperRef.value?.swiper;
  mySwiper?.on('destroy', () => {
    mySwiper = null;
  });
});

4. 排查手动销毁逻辑 #

检查代码中是否存在手动调用swiper.destroy()的逻辑，确保只有在真正需要销毁实例时才执行该方法；如果使用的是Swiper官方Vue组件，严格按照文档规范使用，避免手动操作DOM导致实例异常。

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