Vue.js 官方样式指南来了！

Vue.js 文档现在有一个 官方样式指南（测试版）！该样式指南是避免错误、提高可读性、一致性和避免在不需要时使用风险边缘案例功能的绝佳资源。

该样式指南的目的并不一定是强制执行特定风格的 JavaScript 编写，而是更侧重于特定模式（并避免反模式），从而改进您的 Vue 代码。总而言之，该指南的目标在样式指南引言中概述如下（强调部分添加）：

这是 Vue 特定代码的官方样式指南。如果您在项目中使用 Vue，它是一个避免错误、争论和反模式的绝佳参考。但是，我们不认为任何样式指南都适合所有团队或项目，因此建议根据过去的经验、周围的技术堆栈和个人价值观进行谨慎的偏差。

在大多数情况下，我们也避免对 JavaScript 或 HTML 一般建议。我们不介意您是否使用分号或尾部逗号。我们不介意您的 HTML 是否使用单引号或双引号作为属性值。但是，某些例外情况会存在，我们发现特定模式在 Vue 的上下文中很有用。

样式指南规则按优先级从最高到最低排序：

• 优先级 A：必要
• 优先级 B：强烈推荐
• 优先级 C：推荐
• 优先级 D：谨慎使用

#重点

以下是让我印象深刻的必要规则中的一些，我并没有 100% 遵循这些规则，但我认为它们可以改进我的 Vue 应用程序。

#多单词组件名称（必要）

使用多单词组件名称是一条必要规则，因为现有和未来的 HTML 元素都是单单词的。此外，我的单单词组件往往过于通用，在代码中难以阅读。

错误

Vue.component('todo', {
  // ...
})

正确

Vue.component('todo-item', {
  // ...
})

#带键的 v-for（必要）

在阅读样式指南之前，我甚至不知道 :key 属性。在 v-for 中使用 key“始终在组件上是必需的，以维护子树中的内部组件状态”。该指南还建议在元素上使用它“以保持可预测的行为，例如动画中的对象恒定性”。

错误

<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

正确

<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

阅读该规则的官方文档。

#私有属性名称（必要）

对于插件和 mixin，对方法进行命名空间是一条必要的样式规则。

错误

var myGreatMixin = {
  // ...
  methods: {
    $update: function () {
      // ...
    }
  }
}

正确

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

阅读该规则的官方文档。

#未来添加

Vue 样式指南还提到了通过 ESLint 强制执行样式的未来添加内容：

很快，我们还将提供强制执行方面的提示。有时您只需要自律，但在尽可能的情况下，我们会尝试向您展示如何使用 ESLint 和其他自动化流程来简化强制执行。

我使用 Airbnb 风格 和 ESLint（以及一些覆盖规则），但我也很期待对 ESLint 的进一步更新，以帮助在适当的地方强制执行样式。

#了解更多

在开发了几个小型应用程序后，您会最了解 Vue 样式指南。样式指南是那些了解 Vue 工作原理的人的现场手册。我建议通过 指南 来熟悉 Vue。

查看 Vue 样式指南。