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。
降低还或者更新某个包的版本,可以直接指定包名@版本号进行安装。
相关文章
- 图像处理工具Python扩展库,你了解吗?
- 十个常用的损失函数解释以及Python代码实现
- 30 个数据科学工作中必备的 Python 包
- 如何在 Windows 上安装 Python
- 几行 Python 代码就可以提取数百个时间序列特征
- 使用Python快速搭建接口自动化测试脚本实战总结
- 哪种编程语言最适合开发网页抓取工具?
- 不要在 Python 中使用循环,这些方法其实更棒!
- 震惊!用Python探索《红楼梦》的人物关系!
- 如何最简单、通俗地理解Python模块?
- 酷炫,Python实现交通数据可视化!
- 为什么急于寻找Python的替代者?
- 30 个数据工程必备的Python 包
- 去字节面试被面这题能答上来吗?谈谈你对时间轮的理解?
- 火山引擎在行为分析场景下的 ClickHouse JOIN 优化
- 用Python爬取了某宝1166家月饼数据进行可视化分析,终于找到最好吃的月饼~
- 在 Linux 上试试这个基于 Python 的文件管理器
- Python列表解析式到底该怎么用?
- 如何快速把你的 Python 代码变为 API
- 十个Python初学者常犯的错误