大家好，这里是大家的林语冰。今天一起考古 Vue 3 组件定义简史、设计思路和知识盲区，深度学习 Vue 3 最终为何选择集成选项式 API 和组合式 API 这两种技术方案。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，英文原味版请临幸 The 5 ways to Define a Component in Vue 3。
Vue 正在进化中，目前在 Vue 3 中有若干种定义组件的套路。从选项式到组合式再到类式 API，情况变化莫测，如果您是 Vue 初学者，可能会一脸懵逼。让我们定义一个简单的组件并使用所有可行方法重构祂。
1. 选项式 API
这是在 Vue 中声明组件的最常见方法。从 Vue 1 沿用至今，您可能已似曾相识。一切都在对象内部声明，并且数据由 Vue 在幕后赋能响应式。祂不是那么灵活，因为祂诉诸 mixin 来共享行为。
2. 组合式 API
在此 RFC（征求意见稿），经过多次讨论、社区反馈以及令人惊讶的一大坨娱乐花边后，Vue 3 中引入了组合式 API。设计动机 是提供更灵活的 API 和更好的 TS（TypeScript）支持。这种方法强依赖于 setup 生命周期钩子。
如您所言，使用这种混合方法，需要一大坨模板代码，并且 setup 函数很快就会把持不住。当迁移到 Vue 3 时，这可能是一个很好的中间步骤，但是有可用的语法糖可以使一切变得更清晰。
3. setup 脚本
在 Vue 3.2 中引入了更简洁的语法。通过在 script 元素中添加 setup 属性，脚本中的所有内容都会自动暴露给模板。通过这个语法糖可以删除一大坨模板文件。
4. 响应性转换
2023 年 1 月 26 日更新：此方案极具争议，因此被删除！这使得 setup 脚本成为本文的一目了然且显而易见的答案。
script setup 的问题如下代码片段所示。
如你所见，使用 .value 读写响应式 counter 感觉不自然，并且是混乱和错误输入的常见根源。有一个实验性解决方案利用编译时转换来对症下药。响应性转换 是一个 可选 的内置步骤，这会自动添加此后缀并使代码看起来更干净。
$ref 需要构建步骤，但在读写变量时不再需要 .value。这启动后全局可用。
5. 类式 API
类式 API 存在蛮久了。通常与 TS 梦幻联动是 Vue 2 的可靠选择，并且被认真考虑作为默认的 Vue 3 语法。但经过多次长时间的讨论后，祂被放弃了，取而代之的是组合式 API。祂在 Vue 3 中可用，但工具链明显缺乏，官方建议果断放弃。无论如何，如果您真的喜欢使用类，您的组件将看起来如下所示。
完结撒花
那么哪种方案乃最佳实践呢？从 Vue 2 迁移时，选项式 API 和类式 API 可以作为中间步骤，但祂们不应该是您的首选。如果您无法进行构建阶段，那么组合式 API setup 是唯一的选择，但由于大多数项目都诉诸 Webpack 或 Vite 生成，因此使用 script setup 是可能的，而且实际上值得鼓励，因为大多数可访问的文档都使用这种方法。
友情赞助
关于其他 99 种套路，语冰确信已经发现了一种流量密码，可惜这里知识的盲区太小，写不下。
您现在收看的是前端翻译计划，学废了的小伙伴可以订阅此专栏合集，我们每天佛系投稿，欢迎持续关注最新动态。谢谢大家的点赞，掰掰~