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

最新

Vue2.x已发布（vue2.7）最后一个版本的beta版本，原生支持composition API。

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'

提示

当迁移到 Vue 3 时，只需简单的将 @vue/composition-api 替换成 vue 即可。你现有的代码几乎无需进行额外的改动。

2. 使用

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

提示

由于 Vue 2 的公共 API 的限制，@vue/composition-api 不可避免地引入了额外的性能开销。除非在极端情况下，否则这并不会对你造成影响。

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。

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