Vue 3 SFC 集成原生 JS 插件需确保 DOM 就绪（onMounted + nextTick）、用 ref 绑定容器、watch props 手动更新实例、onBeforeUnmount 清理资源，并透传配置/事件/插槽，禁用 inheritAttrs，处理 TS 类型与 Vite/SSR 兼容性。
在 Vue 3 单文件组件（SFC）中集成第三方原生 JS 插件，关键不是“能不能用”，而是“怎么让插件和 Vue 的响应式、生命周期、DOM 管理协同工作”。直接 import 后调用，容易踩坑：DOM 拿不到、多次初始化、props 变了插件不更新、卸载时内存泄漏。下面说几个真正落地、项目里验证过的做法。
确保 DOM 就绪再初始化
多数原生插件（如 CountUp、Typed.js、Swiper 原生版）依赖真实 DOM 节点。Vue 3 的 onMounted 是起点，但不够——模板渲染是异步的，ref 元素可能还没挂载到页面上。
- 必须配合
nextTick：在onMounted内调用，确保 ref 所指的容器已真实存在于 DOM 中 - 用
ref绑定容器，别用 ID 查询：避免全局污染和冲突，也利于 SSR 兼容 - 示例：
const container = ref<HTMLDivElement | null>(null); onMounted(async () => { await nextTick(); if (container.value) { new SomePlugin(container.value, { /* options */ }); } });
响应 props 变化并控制实例生命周期
原生插件通常不响应数据变化。如果插件需要根据 props 重绘或刷新（比如图表数据更新、计数目标变更），不能只靠初始化一次。
- 把插件实例存进
ref（非响应式），避免被 Vue 的 proxy 干扰行为 - 用
watch监听关键 props，手动调用插件的 update / refresh / destroy + re-init 方法 - 务必在
onBeforeUnmount中清理：调用插件的destroy()、移除事件监听、清除定时器，防止内存泄漏
透传配置、事件与插槽，保持 Vue 使用习惯
封装后应像原生 Vue 组件一样使用：支持 v-model（如适用）、接收 options 对象、emit 自定义事件、容纳默认内容。
立即学习“Java免费学习笔记（深入）”；
- 用
defineProps接收配置项，再解构传给插件构造函数 - 用
defineEmits声明插件会触发的事件（如ready、change），在插件回调中emit - 插槽内容通过
$slots.default渲染到插件容器内（部分插件支持 HTML 内容注入） - 禁用属性自动继承：
inheritAttrs: false，再用v-bind="$attrs"显式透传 class/style 等，避免样式错乱
类型安全与构建兼容性要提前处理
TS 报错、Vite 启动报 window is not defined 或 process is not defined，往往不是代码写错了，而是集成姿势不对。
- 没类型定义？先查
@types/xxx；没有就用declare module 'xxx'写简易声明，或临时as any（仅开发期） - Vite 下报全局变量错误：插件内部用了
window或process，需在vite.config.ts中配置 define 或 inject，或改用动态导入（import('xxx').then(...)）延迟执行 - SSR 场景下，所有插件逻辑必须包裹在
if (typeof window !== 'undefined')中，且初始化放在onMounted之后
