Vue3项目引入Vue2版vue-pivottable报this.$set不是函数如何解决

• 复现版本：Vue 3.0.0、Vue 3.2.37全版本复现
• 触发场景：集成Vue2生态的vue-pivottable组件时运行失败，该组件为PivotTable.js的Vue2封装，依赖声明为"vue": "^2.6.10"
• 报错信息：控制台在PivottableUi.js?4d01:252:1位置抛出异常：this.$set is not a function
• 根因：Vue3已移除$set等Vue2全局API，Vue2语法编写的组件无法直接在原生Vue3环境运行
• 核心诉求：不修改组件源码、不自行重写PivotTable封装逻辑，尽可能降低开发成本、避免引入冗余依赖，直接复用现有组件

按优先级从高到低尝试，优先选择无额外依赖的方案：

方案1：全局注入API兼容polyfill（零额外依赖） #

Vue3基于Proxy实现响应式系统，本身不需要$set做响应式拦截，直接赋值即可触发视图更新，只需要在项目入口挂载兼容实现即可解决报错，不需要改动组件源码。

1. 在项目入口文件（main.js/main.ts）创建Vue实例后、挂载应用前，添加全局属性配置：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 实现Vue2风格$set兼容
app.config.globalProperties.$set = (target, prop, value) => {
  // 处理数组下标赋值场景
  if (Array.isArray(target) && typeof prop === 'number') {
    target.length = Math.max(target.length, prop + 1)
    target.splice(prop, 1, value)
    return value
  }
  target[prop] = value
  return value
}

// 按需补充其他可能缺失的Vue2 API，比如$delete
app.config.globalProperties.$delete = (target, prop) => {
  if (Array.isArray(target) && typeof prop === 'number') {
    target.splice(prop, 1)
    return
  }
  delete target[prop]
}

app.mount('#app')

2. 配置构建工具别名，避免第三方组件和项目本身加载多份Vue实例导致冲突：

• Vite项目在vite.config.js中添加配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: path.resolve(__dirname, 'node_modules/vue/dist/vue.esm-bundler.js')
    }
  }
})

• Vue CLI/Webpack项目在vue.config.js中添加对应webpack别名配置即可。

该方案适用场景：组件仅用到$set/$delete这类简单的被移除API，没有使用过滤器、$on/$off事件总线、$children等其他Vue2独有特性，配置后即可直接正常运行，无任何额外依赖成本。

方案2：使用官方兼容构建层（兼容性最优） #

如果方案1配置后仍有其他Vue2语法相关报错，直接使用Vue官方提供的@vue/compat兼容构建版本即可，该版本是Vue3官方维护的兼容层，可自动适配绝大多数Vue2语法，不需要修改第三方组件源码。

1. 安装依赖：

npm i @vue/compat

2. 配置构建工具别名，将所有Vue导入指向兼容构建版本，以Vite为例：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  }
})

3. 在入口文件配置全局兼容模式为Vue2模式，关闭不必要的迁移提示：

import { configureCompat } from 'vue'
configureCompat({
  MODE: 2
})

该方案兼容度覆盖90%以上的Vue2生态组件，唯一成本是引入官方维护的兼容层依赖，包体积比标准Vue3增加不到10%，可直接用于生产环境，不存在第三方兼容包的维护风险。

不要尝试在项目中同时安装Vue2和Vue3双版本来运行组件，会导致Vue实例冲突、打包体积翻倍、响应式失效等一系列难以排查的问题。

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