vue2使用vue3语法

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');