【译】Vue 3 定义组件的 99 种套路

大家好,这里是大家的林语冰。今天一起考古 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 种套路,语冰确信已经发现了一种流量密码,可惜这里知识的盲区太小,写不下。

您现在收看的是前端翻译计划,学废了的小伙伴可以订阅此专栏合集,我们每天佛系投稿,欢迎持续关注最新动态。谢谢大家的点赞,掰掰~

相关推荐
天涯学馆5 分钟前
工厂模式在 JavaScript 中的深度应用
前端·javascript·面试
newxtc14 分钟前
【JJ斗地主-注册安全分析报告】
开发语言·javascript·人工智能·安全
陪我一起学编程23 分钟前
关于nvm与node.js
vue.js·后端·npm·node.js
烛阴42 分钟前
告别原生Cookie:js-cookie如何实现Cookie的优雅管理
前端·javascript
周全全1 小时前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙2 小时前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪2 小时前
单点登录全流程小姐
前端·javascript·面试
y东施效颦2 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
秋田君3 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~3 小时前
React中子传父组件通信操作指南
前端·javascript·react.js