如何使用VueCompositionAPI Vue 3 ?

Question

我更新了项目中的所有包。升级值3。完成更新后，我的代码出现了问题。我不能用Vue.use(VueCompositionAPI);在旧版本的项目中，我从import VueCompositionAPI中调用它从"@vue/composition-api";但是这个包与due 3不兼容了，所以我不能调用它。我该怎么办?

package.json:

{
"name": "front",
"version": "1.0.0",
"description": "Frontend",
"main": ".eslintrc.js",
"directories": {
"test": "tests"
},
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint": "vue-cli-service lint"
},
"repository": {
"type": "git",
},
"keywords": [
"fdm"
],
"author": "etc",
"license": "ISC",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/vue-fontawesome": "^3.0.1",
"@jsonforms/core": "^2.5.2",
"@jsonforms/vue": "^2.5.2",
"@jsonforms/vue-vanilla": "^2.5.2",
"@vue/cli-plugin-babel": "^5.0.8",
"@vue/cli-plugin-e2e-nightwatch": "^5.0.8",
"@vue/cli-plugin-eslint": "^5.0.8",
"@vue/cli-plugin-pwa": "^5.0.8",
"@vue/cli-plugin-router": "^5.0.8",
"@vue/cli-plugin-unit-mocha": "^5.0.8",
"@vue/cli-plugin-vuex": "^5.0.8",
"@vue/cli-service": "^5.0.8",
"@vue/eslint-config-airbnb": "^6.0.0",
"@vue/test-utils": "^2.0.2",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"bootstrap-vue": "^2.22.0",
"chai": "^4.3.6",
"chromedriver": "^103.0.0",
"core-js": "^3.23.4",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-vue": "^9.2.0",
"geckodriver": "^3.0.2",
"json-schema-ref-parser": "^9.0.9",
"jsonpath": "^1.1.1",
"lodash": "^4.17.21",
"node-sass": "^7.0.1",
"npm": "^8.13.2",
"register-service-worker": "^1.7.2",
"sass-loader": "^13.0.2",
"vue": "^3.2.37",
"vue-axios": "^3.4.1",
"vue-bootstrap4-table": "^1.1.11",
"vue-router": "^4.1.1",
"vue-sorted-table": "^1.3.0",
"vue-template-compiler": "^2.7.4",
"vuedraggable": "^2.24.3",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/eslint-parser": "^7.18.2",
"eslint": "^8.19.0"
}
}

我main.js:

import Vue 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';

Vue.config.productionTip = false;
Vue.use(VueCompositionAPI);
// Install BootstrapVue
Vue.use(BootstrapVue);
Vue.use(SortedTablePlugin);
library.add(
faSpinner,
);
Vue.component('font-awesome-icon', FontAwesomeIcon);
Vue.component('font-awesome-layers', FontAwesomeLayers);
new Vue({
router,
store,
render: (h) => h(App),
}).$mount('#app');

Answer 1

看，vue 2是建立在选项API上的。Vue 3是基于组合API构建的。

为了在你的Vue 2应用中使用复合API，你需要@vue/composition- API包来运行它。

你所做的是:你升级到3(这是默认的组合API)，并试图使用@vue/composition- API，这只是为vue 2为了使用组合API。但是vue 3是默认的组合API。我希望你在这里给我。

而且，从2.7版本开始，你甚至不再需要这个包了

还有一个注释:

当你迁移到Vue 3时，只需将@vue/composition-api替换为Vue你的代码应该可以正常工作。

在值2中。你做了什么:

const { ref, reactive } = VueCompositionAPI

在值3。

import { ref, reactive } from "vue"

或:

const { ref, reactive } = Vue;