从带有属性装饰器和类样式语法的 vue2 迁移到 vue3

Question

我维护着一个相当大的 vue2 项目，其中使用了 Vuetify、vue-class-component、vue-property-decorator 和 typescript 等库。示例组件：

\n

\n （为了显示语法，该组件被简化且不可编译）

\n

我们对这个设置非常满意，因为语法简单，它\xc2\xb4s对于新的和现有的开发人员来说很容易理解，并且因为\xc2\xb4t中的这个设置没有任何真正的问题\xc2\xb4s目前寿命为 2-3 年。\n对 vue2 的官方支持即将结束，我们希望升级到 vue3。现在我们的问题是我们应该走哪条路，以及什么是可能的。我\xc2\xb4已经研究了一段时间了，但仍然对该主题感到困惑。vue3 中的 Composition API 的制定是有原因的，人们似乎普遍对它感到满意，但我很难理解这一点。除了一些很酷的新功能之外，Composition API 对我来说似乎是一种降级，因为它不容易理解、“冗余”，而且语法过于明确。举几个例子：

\n

道具：

\n

Vue2\n@Prop({ default: \'\' }\nlabel!: MyProp;\n\nVue3\nprops: {\n  myProp: {\n    type: Object as PropType<MyProp>, //Kind of weird explicit type definition \n    default: \'\'\n  },\n}\n

\n

变量（函数也是如此）

\n

Vue2\nmyValue: string = ""; //Reactive and available in the template\n\nVue3\nsetup(props, context) { //Must be setup in the setup function to make it available in the template\n  const myValue: Ref<string> = ref(""); //Must declare it reactive with this funky explicit syntax\n  return {\n    myDataValue, //Must be returned from setup function\n  };\n}\n

\n

计算属性

\n

Vue2 \nget myValue(): string {\n    return this.myDataValue.toLowerCase();\n}\n\nVue3\nsetup(props, context) {\n  const myValue: ComputedRef<string> = computed(() => {\n    return myDataValue.value.toLowerCase(); //Accessing a value requires .value\n  });\n}\n

\n

即使我们决定使用 Composition API，重写我们的代码库也是非常昂贵和耗时的。

\n

我\xc2\xb4ve尝试使用Options API从头开始创建一个示例vue3类样式组件项目（遵循本指南，然后将一些现有组件复制到该项目中。在一些人摆弄后，这似乎没有花费太多时间。因此，当 Vuetify 3 最终发布并且我们可以迁移时，我的问题是：

\n

\n
1. Vue3 Options API + vue-property-decorator 是可行的方法吗？
\n
2. vue-property-decorator库已经两年没有更新了！并且没有官方的vue3支持文档。那么 vue3 中的 vue-property-decorator 是一个非常糟糕的主意吗？
\n
3. 迁移到 Composition API 真的值得花费时间和精力吗？
\n

\n

谢谢！

\n

2023 年 8 月 1 日更新：

\n

在迁移之前，我们尝试了一些 Vue3 Composition API 测试。语法和“麻烦”的做事方式让我们选择了 vue-faceing-decorator。这与 vue-property-decorator 基本相同，到目前为止我们对我们的选择非常满意 \n非常感谢您的贡献。

\n

Answer 1

我们正在使用 Vue 2，其中许多组件使用 vue-class-component 和 vue-property-decorator 构建在基于类的组件之上。

现在我们需要升级到 Vue 3 以获得更好的性能和长期支持。

回答您的问题：

1. 我做了很多研究，并且没有计划从这里支持基于类的组件。上面的两个插件在 Vue 3 中停留在 RC 级别。请参阅：https ://github.com/vuejs/vue-class-component/issues/406

2. 在我看来，未使用新版本的 Vue 进行维护和/或正确测试的库绝不是使用的好主意。

3. 这是一个没有明确答案的问题。

你可以尝试这个策略，也许它也适合你：

我们通过这些插件将组合 API 和脚本设置添加到现有的 Vue 2 代码库中：

• https://github.com/vuejs/composition-api
• https://github.com/antfu/unplugin-vue2-script-setup

2010年7月22日更新：Vue 2.7（最后一个小版本）发布，使用此版本时不需要上述插件：https ://blog.vuejs.org/posts/vue-2-7-naruto .html

这允许我们同时使用组合 API + 脚本设置和基于类的组件。因此，我们开始用新语法编写新组件，并逐步重写旧代码。完成此过程后，我们将使用迁移指南迁移到 Vue 3：

• https://v3-migration.vuejs.org/

这是一项繁重的工作，而且非常烦人，因为它需要花费大量时间来处理新功能或错误修复，而这比处理升级带来的痛苦更重要。但我们希望从这里开始，Vue 能让我在他们的决定以及他们想要如何继续前进方面更加稳定。

我也同意你的说法，基于类的组件是比组合 API 更优雅的做事方式。它也更短并且更接近后端编程语言。看到这个离开真是令人难过。

雅各布一切顺利

2014 年 4 月 23 日更新：关于如何继续使用基于类的组件的精彩新文章： https://medium.com/@robert.helms1/vue-2-to-vue-3-with-class-components-cdd6530a2b2a

更多资源：

指南：https ://levelup.gitconnected.com/from-vue-class-component-to-composition-api-ef3c3dd5fdda

他们放弃它的更多原因：

https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121

https://github.com/vuejs/rfcs/blob/function-apis/active-rfcs/0000-function-api.md#type-issues-with-class-api

https://vuejs.org/guide/extras/composition-api-faq.html#better-type-in​​ference