跳至主要內容

Vue风格指南

LincZero大约 3 分钟

Vue风格指南

参考:Vue风格指南open in new window

规则归类

优先级 A:必要的

这些规则会帮你规避错误,所以学习并接受它们带来的全部代价吧。这里面可能存在例外,但应该非常少,且只有你同时精通 JavaScript 和 Vue 才可以这样做。

优先级 B:强烈推荐

这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了,代码还是能照常运行,但例外应该尽可能少且有合理的理由。

优先级 C:推荐

当存在多个同样好的选项,选任意一个都可以确保一致性。在这些规则里,我们描述了每个选项并建议一个默认的选择。也就是说只要保持一致且理由充分,你可以随意在你的代码库中做出不同的选择。请务必给出一个好的理由!通过接受社区的标准,你将会:

  1. 训练你的大脑,以便更容易的处理你在社区遇到的代码;
  2. 不做修改就可以直接复制粘贴社区的代码示例;
  3. 能够经常招聘到和你编码习惯相同的新人,至少跟 Vue 相关的东西是这样的。

优先级 D:谨慎使用

有些 Vue 特性的存在是为了照顾极端情况或帮助老代码的平稳迁移。当被过度使用时,这些特性会让你的代码难于维护甚至变成 bug 的来源。这些规则是为了给有潜在风险的特性敲个警钟,并说明它们什么时候不应该使用以及为什么。

优先级 A

优先级 B

优先级 C

优先级 D

use命名

参考:https://cn.vuejs.org/guide/reusability/composables#conventions-and-best-practices

约定和最佳实践 - 命名

Quote

组合式函数约定用驼峰命名法命名,并以“use”作为开头。

什么是“组合式函数”?

Quote

在 Vue 应用的概念中,“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

当构建前端应用时,我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间,我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑:它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多,比如你可能已经用过的 lodashopen in new window 或是 date-fnsopen in new window

相比之下,有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中,也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。