助力升级Script setup
Vue2 Opitons api to Vue 3 Composition api 在线使用 网站 Gitee: vue2-to-composition-api Github: vue2-to-composition-api 随着Vue2.7版本的发布，对与Vue2用户群体从Options API 转向Composition API 有着巨大的推动作用，vue2-to-composition-api 是一款可以将Options API转换成Composition API的在线应用工具，转换后直接导出 Script setup 内容，帮助Vue2项目减少Options API语法迁移成本 注意事项 Template 中的内容不在转换器解析范畴内，需要手工替换 Data 数据源 Mixin、Component 等外部内容无法被解析，转换前需将其剔除 转换后仍然留下this.指向的都是未知来源的数据 如果你使用了被Vue3废弃的指令，如 $on、$once、$off 等，都需要手工进行移除，转换器仍然会指向vm实例下 转化工具在设计思路上，对Vue2.7版本会更加友好，其他问题详见网站文档或本文下方 Props / Data 数据转换 Computed 计算器属性转换 Watch 侦听器转换 Life cycle 生命周期转换 Methods 方法转换 Install 安装（推荐使用在线网站） npm install vue2-to-composition-api Conversion 使用转换 import Vue2ToCompositionApi from 'vue2-to-composition-api' const vue2ScriptContentStr = ` export default { name: 'Sample', props: { userInfo: { type: Object, required: false, default: () => ({ userName: 'Todd Cochran', userAge: 20 }) } }, data() { return { firstName: '', lastName: '' } } }` const vue3ScriptContentStr = Vue2ToCompositionApi(vue2ScriptContentStr) console.log('Hello! Composition API\\n', vue3ScriptContentStr) 无法解析的内容 请不要键入 Mixin、Component 等外部内容，转换器无法解析外部的文件，Mixin 混入内部的变量与方法都需另外手工处理，动态变量或者拼接的内容也同样无法被解析或解析错误 export default { name: 'Sample', mixins: [myMixin], components: { Echart }, methods: { onSubmit(propName) { this[propName] = '123' this.$emit(propName + '-change') } } } Template中的Data变更 转换后需为 Template 中的 Data 数据需加上 .data 前缀，其原因是许多开发者在Options API语法中做了改变引用类型数据地址的行为（如下），Data 将会被转换为一个完整的对象以兼容此类操作，此方式额外产生的迭代成本更小 Options API: <template> <div>{{ userInfo }}</div> </template> export default { name: 'Sample', data() { return { userInfo: {} } }, created() { this.userInfo = { name: 'Casey Adams', age: 80 } } } Composition API: <template> <div>{{ data.userInfo }}</div> </template> import { reactive } from 'vue' const data = reactive({ userInfo: {} }) data.userInfo = { name: 'Casey Adams', age: 80 } Template中的Filter变更 Filter 已经被废弃，它将会被转换为外部的 Function 内容，需要在 Template 中改变 Filter 的调用方式 Options API <template> <div>{{ married | toMarried }}</div> </template> export default { name: 'Sample', filters: { toMarried(value) { return value ? 'Yes' : 'No' } } } Composition API: <template> <div>{{ toMarried(data.married) }}</div> </template> function toMarried(value) { return value ? 'Yes' : 'No' } Vue2.7中延用Router3.x、Vuex3.x 如若不想在 Vue2.7 项目中更新 Router4 与 Vuex4 ，可以从 vue 实例中获取 Router、Router、Store import { getCurrentInstance } from 'vue' const $vm = getCurrentInstance() const router = $vm.proxy.$router const route = $vm.proxy.$route const store = $vm.proxy.$store Git地址 Gitee Github
