Vue中如何正确引入并使用jquery.min.js？

Question

在 Vue 3（尤其是基于 Composition API 和 Vite 构建的项目）中，直接通过 `<script src="jquery.min.js"></script>

Answer 1

```html

一、基础认知：Vue 3 与 jQuery 的运行时本质冲突

在基于 Vite + Composition API 的 Vue 3 项目中，<script src="jquery.min.js"></script> 的引入看似简单，实则触发了现代前端工程化与传统 DOM 操作范式的根本性张力。Vue 3 采用响应式系统（Proxy）、虚拟 DOM Diff、异步更新队列与组件作用域隔离机制；而 jQuery 依赖全局 $、直接操作真实 DOM、隐式状态维护及事件委托劫持——二者在生命周期管理、DOM 更新时机、事件绑定语义上天然不兼容。

二、典型现象：引入后高频报错与行为异常

• Uncaught ReferenceError: $ is not defined（Vite 默认禁用全局 script 注入）
• Vue 组件内 mounted() 中调用 $('#app').fadeIn() 但 DOM 尚未就绪（Vite HMR 重载时节点被销毁重建）
• jQuery 插件（如 DataTables）初始化后，Vue 响应式数据变更无法同步到 jQuery 渲染的表格体
• Vite 生产构建时，jquery.min.js 未被正确 externals 或 chunk 分离，导致重复打包体积激增

三、工程化路径分析：Vite 配置层关键干预点

配置项	作用	推荐值示例
build.rollupOptions.external	将 jQuery 排除出打包产物，交由 CDN 或手动 script 引入	['jquery']
optimizeDeps.exclude	防止 Vite 尝试预构建 jQuery（避免 CommonJS 转换失败）	['jquery']

四、安全集成方案：Composition API 中的渐进式桥接

不推荐在 setup() 中直接使用 $，而应封装为受控 Hook：

import { onMounted, onUnmounted, ref } from 'vue'

export function useJQuery(selector) {
  const $el = ref(null)
  
  onMounted(() => {
    if (typeof window !== 'undefined' && window.$) {
      $el.value = $(selector)
      // 可在此绑定 jQuery 事件，但需注意：避免与 Vue 事件混用
      $el.value.on('click', '.btn', handleJQueryClick)
    }
  })

  onUnmounted(() => {
    $el.value?.off('click', '.btn')
  })

  return { $el }
}

五、深度权衡：何时必须引入 jQuery？决策树

graph TD
  A[需接入遗留 jQuery 插件？] -->|是| B{插件是否提供 ESM/UMD 版本？}
  B -->|是| C[通过 defineExpose + window.$ 桥接]
  B -->|否| D[强制 script 标签注入 + 等待 window.jQuery]
  A -->|否| E[立即放弃 jQuery，改用 Vue 原生生态]
  C --> F[验证插件与 Vue 3 生命周期兼容性]
  D --> G[使用 onMounted + nextTick + setInterval 轮询 $ 存在性]

六、生产级实践：CDN + 动态加载 + 类型声明补全

在 index.html 中按需插入（非全局强制）：

<!-- index.html -->
<script type="module">
  if (!window.jQuery) {
    const script = document.createElement('script')
    script.src = 'https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js'
    script.onload = () => console.log('jQuery loaded via CDN')
    document.head.appendChild(script)
  }
</script>

同时安装类型声明：npm install -D @types/jquery，并在 env.d.ts 中补充：

declare global {
  interface Window {
    $: typeof import('jquery')
    jQuery: typeof import('jquery')
  }
}

七、替代路线图：Vue 3 原生能力对标 jQuery 常用场景

• DOM 查询 → ref() + onMounted(() => el?.querySelector(...))
• 动画效果 → <Transition> + CSS @keyframes 或 useMotion（VueUse）
• AJAX → fetch / axios + useAsync（VueUse）
• 表单验证 → vuelidate 或 vee-validate@4

```