Vue2.x中使用composition API，平滑过渡Vue3

Vuejs官方出品：https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md

基于组合式API的一组实用函数：https://vueuse.org/guide/

@vue/composition-api 

1. 安装

npm install @vue/composition-api -D

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue.use(VueCompositionAPI)
import App from './App.vue'
new Vue({render: h => h(App),}).$mount('#app')

// 使用 API
import { ref, reactive } from '@vue/composition-api'

2. 使用

所有组合式API都和Vue3.x对齐，使用过程中基本无区别。

const store = root.$store
const router= root.$options.router

状态管理器和路由对象可通过以上方式获取。

3. 差异

vue2.x的组合式api和vue3还存在差异，具体可查看：https://github.com/vuejs/composition-api/blob/HEAD/README.zh-CN.md

4. vite使用

4.1 插件安装

Vite-plugin-vue2：https://github.com/vitejs/vite-plugin-vue2

import { createVuePlugin } from 'vite-plugin-vue2'
export default {
  plugins: [
    createVuePlugin(/* options */)
  ],
}

4.2 编译器

vue-template-compiler：https://www.npmjs.com/package/vue-template-compiler

必须和vue版本一致，2.7版本的Vue不需要安装。

使用记录

如果有调整，需要重新安装整个开发环境的包，应该删除node_modules和package-lock.json。

降低还或者更新某个包的版本，可以直接指定包名@版本号进行安装。