在组合式 API 中使用 Swiper 需在 onMounted 初始化、onUnmounted 销毁实例，用 ref 绑定容器并手动同步响应式更新，v-if 可自动重建，v-show 需检查实例存在性。
在组合式 API 中使用 Swiper 这类依赖 DOM 节点和生命周期时机的第三方库，核心在于等元素挂载完成后再初始化实例，并确保在组件卸载时正确销毁，避免内存泄漏或重复初始化。
用 onMounted 确保 DOM 可访问
Swiper 需要操作真实 DOM 节点，而 setup() 执行时模板尚未渲染，ref 还未绑定到元素。必须等到 onMounted 钩子中再初始化：
- 用 ref 绑定容器元素（如
<div ref="swiperRef">） - 在 onMounted 中检查
swiperRef.value是否存在，再传给 Swiper 构造函数 - 不要在 setup 顶层或 onBeforeMount 中调用 new Swiper()，此时 DOM 不可用
用 onUnmounted 清理 Swiper 实例
Swiper 会绑定事件、定时器、resize 监听等，组件卸载时不销毁会导致资源残留：
- 将 Swiper 实例保存为 ref（如
const swiper = ref(null)） - 在 onUnmounted 中调用
swiper.value?.destroy(true)（true表示清除绑定的事件和 DOM 修改） - 避免在 unmounted 后仍尝试调用
swiper.value.slideTo()等方法
响应式更新需手动同步
Swiper 不自动响应 Vue 的响应式变化（如 slides 数组更新）。需要主动处理：
- 监听数据变化（如用 watch 监听 slides），触发
swiper.value?.updateSlides()或swiper.value?.update() - 若新增/删除 slide，调用
swiper.value?.appendSlide()/removeSlide()等原生方法 - 避免直接替换整个 DOM 结构，否则 Swiper 实例会失效，应优先使用 Swiper 提供的 API 操作
配合 v-if 或动态组件时注意重建逻辑
当 Swiper 容器被 v-if 控制显隐，或在 <component :is="..."/> 中切换时：
-
v-if="false"会彻底卸载，再次为 true 时会重新走 mounted → unmounted 流程，无需额外处理 - 但若用
v-show，容器始终存在，需在显示前检查swiper.value是否已存在，不存在才初始化 - 可在
onActivated（keep-alive 场景）中调用swiper.value?.init()或enable()恢复功能
