Composition API
Composition API 将是 Vue 3 的核心功能,它具有许多更改和性能改进。
我们也可以在 Vue 2 中通过 npm 插件@vue/composition-api 使用它。
安装 yarn add @vue/composition-api
之后,在入口文件 main.js 中使用它。
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)
之后,你就可以在你vue2项目中用vue3的组合式API来编写组件了!
<template>
<button @click="increase">count is: {{ count }}</button>
</template>
<script>
export default {
setup() {
let count = 0
const increase = () => count++
return { count, increase }
},
}
</script>
script setup
<script setup>
语法糖可以使得组合式API编写更为简洁。
这里我们通过unplugin-vue2-script-setup 让vue2在使用@vue/composition-api
的基础上也能使用上此特性!
安装 yarn install --dev unplugin-vue2-script-setup
,之后在vue.config.js中进行配置
const ScriptSetup = require('unplugin-vue2-script-setup/webpack').default
module.exports = {
parallel: false, // disable thread-loader, which is not compactible with this plugin
configureWebpack: {
plugins: [
ScriptSetup({ /* options */ }),
],
},
}
路由和vuex等
Vue2 Helpers 能让你在vue2中也能使用到更先进的api,比如 useRouter
import { useRouter } from 'vue2-helpers/vue-router';
const router = useRouter();
router.push('/login');
标签:count,vue,setup,语法,api,vue2,vue3,API
From: https://www.cnblogs.com/dingshaohua/p/18515911