Vue 是否有一个不使用装饰器的类组件库？答案

【问题标题】：Is there a class component library to Vue that does not use decorators?Vue 是否有一个不使用装饰器的类组件库？
【发布时间】：2021-02-20 06:21:41
【问题描述】：

Vue class component library 使用 @Component 装饰器，因此必须转译才能工作。有没有办法在没有这个装饰器的情况下使用 Vue 类组件？比如，是一种变通方法还是另一个类似的库？

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

【问题讨论】：

标签： vue.js

【解决方案1】：

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

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

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

@foo
@bar()
class Baz {}

与

相同

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

Different decorator types 的应用方式不同，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);

【讨论】：

哦，我可以手动应用装饰器吗？假设它是唯一使用的，否则会变得混乱。顺便说一句，我使用类的原因是增加 TypeScript 的类型安全性，因此可以正确键入道具等。你说那不对？
是的，正如我所说，装饰器语法是一种糖。没有它它们就不漂亮，尤其是成员装饰器。 TS 在类型安全方面偏爱类，但装饰器是不安全的，而 Vue 类有几个不能通过设计保证类型安全的点，包括 props 类型。这是在 React 中从类切换到函数式组件的原因之一，Vue 也吸取了这一教训。所以不，Vue 类不是提供类型安全的好方法，composition API 是。

【解决方案2】：

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

import { defineComponent } from 'vue'

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

更多详情请查看the official docs

一个正在运行的example 开始

【讨论】：

嗯，道具等消除了对类进行类型检查的可能性，这就是目的。我只是想在执行此操作时避免编译。
问题是关于类组件的。 Vue 3 放弃了对它们的官方支持，因为它们存在先天问题。
@EstusFlask 但是只有 vue-class-component 被 vue 2 官方支持，与 vue 3 兼容的 vue-class-component 版本使用 @options 而不是 @component