Vue前端规范【一】-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue前端规范【一】。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

基本规范

这些规则有助于防止错误，因此请不惜一切代价学习并遵守这些规则。例外可能存在，但应该非常罕见，并且只能由具有 JavaScript 和 Vue 专业知识的人进行。

使用多词组件名称

用户组件名称应始终为多字，但 root 除外 App 组件。这可以防止与现有和将来的 HTML 元素发生冲突，因为所有 HTML 元素都是一个单词。

//坏
<!-- in pre-compiled templates -->
<Item />

<!-- in in-DOM templates -->
<item></item>

//好
<!-- in pre-compiled templates -->
<TodoItem />

<!-- in in-DOM templates -->
<todo-item></todo-item>

使用详细的道具定义

在提交的代码中，prop 定义应始终尽可能详细，至少指定类型。

//坏
// This is only OK when prototyping
const props = defineProps(['status'])

//好
// Even better!
const props = defineProps({
  status: {
    type: String,
    required: true,

    validator: (value) => {
      return ['syncing', 'synced', 'version-conflict', 'error'].includes(
        value
      )
    }
  }
})

使用键控 v-for

key 跟 v-for 在组件上始终是必需的，以便维护子树下方的内部组件状态。不过，即使对于元素，保持可预测的行为也是一种很好的做法，例如动画中的对象恒定性。

//坏
<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>

避免 v-if 跟 v-for

从不使用 v-if 在与 v-for。

在两种常见情况下，这可能很诱人：

要过滤列表中的项目（例如 v-for=“user in users” v-if=“user.isActive”）。在这些情况下，请将 users 使用返回筛选列表的新计算属性（例如 activeUsers）。
为了避免在应该隐藏列表的情况下呈现列表（例如 v-for=“user in users” v-if=“shouldShowUsers”）。在这些情况下，请将 v-if 到容器元素（例如 ul、 ol）。

//坏
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

//好
<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

使用组件范围的

对于应用程序，顶级样式 App组件和布局组件可以是全局的，但所有其他组件都应始终限定范围。

这仅与单文件组件相关。它不要求 scoped 属性。范围界定可以通过 CSS 模块、基于类的策略（如井）或其他库/约定。

但是，组件库应该更喜欢基于类的策略，而不是使用 scoped 属性。

这使得覆盖内部样式变得更加容易，使用人类可读的类名，这些类名没有太高的特异性，但仍然不太可能导致冲突。

//坏
<template>
  <button class="btn btn-close">×</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

//好
<template>
  <button class="button button-close">×</button>
</template>

<!-- Using the `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>
<template>
  <button :class="[$style.button, $style.buttonClose]">×</button>
</template>

<!-- Using CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>
<template>
  <button class="c-Button c-Button--close">×</button>
</template>

<!-- Using the BEM convention -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>