如何在组合式 API 中使用第三方库（如 Swiper）？生命周期适配指南
将 Swiper 这类功能强大的第三方库集成到 Vue 的组合式 API 中，听起来简单，但若处理不当，很容易遇到 DOM 未就绪或内存泄漏的“坑”。其核心逻辑其实很清晰：必须等待元素挂载完成后再初始化实例，并在组件退出舞台时妥善清理，这是保证应用健壮性的关键。
用 onMounted 确保 DOM 可访问
一个常见的误区是，在 setup() 函数顶部就迫不及待地创建 Swiper 实例。要知道，此时模板尚未渲染，你通过 ref 绑定的容器元素根本还不存在。因此，正确的舞台是 onMounted 钩子：
- 首先，用 ref 绑定好目标容器元素（例如
）。 - 接着，在 onMounted 回调中，先检查一下
swiperRef.value是否真实可用，再将它作为参数传递给 Swiper 的构造函数。 - 务必记住，
onBeforeMount同样不是合适的时机，此时 DOM 依然不可操作。
用 onUnmounted 清理 Swiper 实例
Swiper 在幕后可没闲着，它会绑定事件监听器、管理定时器、监听窗口变化等等。如果组件卸载时放任不管，这些资源就会残留下来，成为潜在的性能隐患。所以，清理工作是必不可少的：
- 建议将 Swiper 实例本身也保存为一个 ref（例如
const swiper = ref(null)）。 - 在 onUnmounted 钩子中，果断调用
swiper.value?.destroy(true)。这里的true参数很重要，它能确保彻底清除所有绑定的事件和 Swiper 对 DOM 的修改。 - 清理之后，就不要再尝试调用
slideTo()这类实例方法了，否则会触发错误。
响应式更新需手动同步
这里有个关键点需要理解：Swiper 并不自动感知 Vue 的响应式数据变化。当你动态增删轮播项（slides）时，界面不会自动更新。这就需要我们主动搭建“沟通桥梁”：
- 使用 watch 监听 slides 数据源的变化，在回调中触发
swiper.value?.updateSlides()或更通用的update()方法。 - 如果是明确的添加或删除操作，直接调用 Swiper 提供的原生方法（如
appendSlide()、removeSlide()）往往更高效。 - 尽量避免直接替换容器内的整个 DOM 结构，这会导致 Swiper 实例与 DOM 脱节而失效。优先使用 Swiper 自身的 API 来管理内容变更。
配合 v-if 或动态组件时注意重建逻辑
当 Swiper 的容器被条件渲染或动态组件控制时，情况稍有不同，需要区别对待：
- 使用
v-if控制时，条件为false会完全销毁组件，再次显示时会重新经历完整的挂载和卸载生命周期。这种情况下，你之前写好的onMounted和onUnmounted逻辑会自动生效，通常无需额外处理。 - 但如果用的是
v-show，容器元素始终存在于 DOM 中，只是样式隐藏。因此，在控制显示前，需要先检查swiper.value实例是否已经存在，避免重复初始化。 - 此外，在
onActivated生命周期钩子来重新启用或初始化 Swiper 实例，确保功能恢复。
在组合式 API 中使用 Swiper 需在 onMounted 初始化、onUnmounted 销毁实例，用 ref 绑定容器并手动同步响应式更新，v-if 可自动重建，v-show 需检查实例存在性。
