wd3322 Vue2 to Composition API 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
wd3322 Vue2 to Composition API 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
wd3322 Vue2 to Composition API 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 ISC
开发语言 TypeScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发网站API
开源组织
地区 国产
投 递 者 wd3322
适用人群 未知
收录时间 2022-07-13

软件简介

vue2-to-composition-api 是一款可以将Options API转换成Composition API的在线应用工具,转换后直接导出 Script setup 内容,帮助Vue2项目减少Options API语法迁移成本

网站

Gitee: vue2-to-composition-api

Github: vue2-to-composition-api

Git地址

Gitee

Github

在线使用

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)

无法解析的内容

请不要键入 MixinComponent 等外部内容,转换器无法解析外部的文件,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 项目中更新 Router4Vuex4 ,可以从 vue 实例中获取 RouterRouterStore

import { getCurrentInstance } from 'vue'

const $vm = getCurrentInstance()
const router = $vm.proxy.$router
const route = $vm.proxy.$route
const store = $vm.proxy.$store

Package: vue2-to-composition-api

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击引领话题📣
发表了资讯
07/22 10:04

Vue2 to Composition API 语法转换器 V1.1.0 版本更新

Vue2 Opitons api to Vue 3 Composition api 在线使用 网站 Gitee: vue2-to-composition-api Github: vue2-to-composition-api vue2-to-composition-api 是一款可以将Options API转换成Composition API的在线应用工具,转换后直接导出 Script setup 内容,帮助Vue2项目减少Options API语法迁移成本 更新内容 修订 Watch 中的 key 值替换精确度 修订 Function 中的 key 值替换精确度 修订 $refs、$emit 的替换精确度 修订 数据类...

2
5
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
0 评论
1 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部