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>

后续有其他规范会持续更新,欢迎各位大佬提出建议~~~

你可能感兴趣的:(vue.js,前端,javascript)