Vue是否有一个不使用decorator的类组件库

Question

Vue类组件库使用@Component装饰器，因此必须进行转换才能工作。有没有一种方法可以在没有这个装饰器的情况下使用Vue类组件？比如，要么是一个工作场所，要么是另一个类似的图书馆？

用例：对遗留项目的承诺较低，但仍然可以使用tsc进行分析。

Answer 1

Transpiked环境是Vue的预期使用场景。它依赖于自定义.vue格式，如果没有它，可能会缺少一些功能，以及一些第三方库的支持，因为它们依赖它。

在Vue中使用类从来都不是一个好主意，因为它不遵循OOP范式。类不是直接实例化的，而是用作翻译为Vue.component定义的语法结构。Vue类组件存在固有的问题，其中之一是对TypeScript类型的支持不足。如果Vue类还没有在项目中使用，那么它们就不是首选。

如果有必要使用Vue类组件，这可以在香草ES6中完成，因为decorators提案是语法糖，decorators是具有特定签名的函数，应用于类和成员，装饰它们。

@foo
@bar()
class Baz {}

与相同

let Baz = foo(bar()(class Baz {}))

不同的装饰器类型以不同的方式应用，TypeScript和Babel遗留装饰器之间也存在一些差异。

@Component
class Foo extends Vue {
@Provide('bar') baz = 'bar'
}

被翻译成

let Foo = class Foo extends Vue {
constructor() {
this.baz = 'bar'
}
}
Provide('bar')(Foo.prototype, 'baz')
Foo = Component(Foo);

Answer 2

如果Vue 3 typescript得到很好的支持，您可以按照如下方式创建组件：

import { defineComponent } from 'vue'
export default defineComponent({
//the component options like data,props,computed...
})

有关更多详细信息，请查看官方文档

开始的运行示例