Vue2.x中使用composition API,平滑过渡Vue3
- Vue学习
- 2022-06-19
- 1122热度
- 0评论
最新
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。
降低还或者更新某个包的版本,可以直接指定包名@版本号进行安装。