Vue 3作为类组件

Question

目前在项目中，我们使用Vue 2.x，我们的组件以这种方式工作

@Component({
template: `
<div>
some code ....
<div> `
})
export default class class1 extends Vue {
@Prop() data: IsomeData;
}

vue类组件和vue属性装饰器允许我们这样做，根据文档，@component被替换为@Options(｛｝(。

如何在不进行破坏性重构的情况下迁移到Vue3？

Answer 1

试试这个。

<template>
<div>
some code ....
<div> 
</template>
<script>
import { Vue } from "vue-class-component";
import { Prop } from "vue-property-decorator";
export default class Home extends Vue {
@Prop() data: IsomeData;
}
</script>

Answer 2

对于2023年在Vue3中阅读这篇文章的人来说，不再建议使用类组件设计和https://class-component.vuejs.org/软件包创建者没有通过Vue2 进行维护

此库不再处于主动维护状态。不再建议在Vue 3中使用基于类的组件。在大型应用程序中使用Vue 3的推荐方法是Single-File组件、Composition API和。如果您仍然想使用类，请查看社区维护的面向vue的decorator项目。