升级Vue 3后无法使用VueCompositionAPI的解决方法

@vue/composition-api 是面向 Vue 2 提供组合式API能力的兼容包，Vue 3 已经原生内置了所有组合式API实现，完全不需要额外引入该依赖，因此原有Vue.use(VueCompositionAPI)的注册逻辑在Vue3环境下无法生效。

1. 清理冗余与不兼容依赖 #

首先执行命令移除无用的@vue/composition-api包：

npm uninstall @vue/composition-api

*额外注意：当前package.json里存在多个和Vue3不兼容的依赖，后续运行报错时需要同步替换：

• bootstrap-vue@2.x 仅支持Vue2，Vue3环境需替换为bootstrap-vue-next
• vue-template-compiler@2.x 是Vue2的模板编译包，Vue3需替换为和本地vue版本一致的@vue/compiler-sfc
• vuedraggable@2.x 仅支持Vue2，Vue3环境需升级到vuedraggable@4.x
• vue-sorted-table、vue-bootstrap4-table 若后续报注入错误，需替换为对应支持Vue3的版本*

2. 重写入口文件main.js的Vue3初始化逻辑 #

Vue3 取消了全局Vue构造函数的导出，不再支持Vue.use、Vue.component这类全局挂载写法，需要通过createApp创建应用实例，所有插件、组件注册都在该实例上完成，修改后代码如下：

// 替换Vue2的全局Vue导入
import { createApp } from 'vue';
import { BootstrapVue } from 'bootstrap-vue';
import { library } from '@fortawesome/fontawesome-svg-core';
import SortedTablePlugin from 'vue-sorted-table';
import {
  faSpinner, faSortUp, faSortDown, faSort, faFilter, faCheck, faTimesCircle, faUser, faPause,
  faTrash,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome';
import App from './App.vue';
import './registerServiceWorker';
import router from './router';
import store from './store';

// 创建应用实例
const app = createApp(App);

app.config.productionTip = false;

// 删除原有的Vue.use(VueCompositionAPI)，Vue3原生支持组合式API
// 注册插件
app.use(BootstrapVue);
app.use(SortedTablePlugin);
app.use(router);
app.use(store);

// 注册全局图标（原代码漏加了导入的其他图标，这里补上）
library.add(
  faSpinner, faSortUp, faSortDown, faSort, faFilter, faCheck, faTimesCircle, faUser, faPause, faTrash
);

// 注册全局组件
app.component('font-awesome-icon', FontAwesomeIcon);
app.component('font-awesome-layers', FontAwesomeLayers);

// 挂载应用
app.mount('#app');

3. 调整业务代码的导入路径 #

所有业务代码中从@vue/composition-api导入的组合式方法（包括ref、reactive、computed、watch、生命周期钩子等），全部改为直接从vue包导入即可：

// 旧写法（Vue2 + @vue/composition-api）
// import { ref, onMounted } from '@vue/composition-api'

// 新写法（Vue3原生）
import { ref, onMounted } from 'vue'

绝大多数API的调用逻辑和之前composition-api的写法完全一致，只有极少数边缘API存在参数差异，遇到对应报错按需调整即可。

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