Reglas de Prioridad B: Muy Recomendado ​

Se ha encontrado que estas reglas mejoran la legibilidad y/o la experiencia del desarrollador en la mayoría de los proyectos. Tu código se ejecutará aún si no las respetas, pero las violaciones deberían ser raras y estar bien justificadas.

Archivos de componentes ​

Siempre que haya un sistema de compilación disponible para concatenar archivos, cada componente debe estar en su propio archivo.

Esto te ayudará a encontrar más rápidamente un componente cuando necesites editarlo o revisar cómo usarlo.

app.component('TodoList', {
  // ...
})

app.component('TodoItem', {
  // ...
})

components/
|- TodoList.js
|- TodoItem.js

components/
|- TodoList.vue
|- TodoItem.vue

Formato de nombre de los Componente de un Solo Archivo (SFC) ​

Los nombres de archivo de los Componentes de un Solo Archivo deben ser siempre PascalCase o siempre kebab-case.

El autocompletado de los editores de código funciona mejor cuando se utiliza PascalCase ya que este es consistente con la forma en la que referenciamos componentes en JS(X) y las plantillas, siempre que sea posible. Sin embargo, este tipo de nombres en los archivos puede crear problemas en los sistemas de archivos que no distinguen entre mayúsculas y minúsculas, razón por la cual kebab-case también es perfectamente aceptable.

components/
|- mycomponent.vue

components/
|- myComponent.vue

components/
|- MyComponent.vue

components/
|- my-component.vue

Nombres de componentes base ​

Los componentes base (también conocidos como componentes de presentación, "silentes" o puros) que aplican estilos y convenciones específicos de la aplicación deben comenzar todos con un prefijo específico, como Base, App o V.

components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

Nombres de componentes fuertemente acoplados ​

Los componentes hijos que están fuertemente acoplados con su padre deben incluir el nombre del componente padre como prefijo.

Si un componente solo tiene sentido en el contexto de un único componente padre, dicha relación debe ser evidente en su nombre. Dado que usualmente los editores organizar los archivos alfabéticamente, esto también mantiene a estos archivos relacionados cercanos visualmente.

components/
|- TodoList/
   |- Item/
      |- index.vue
      |- Button.vue
   |- index.vue

components/
|- TodoList/
   |- Item/
      |- Button.vue
   |- Item.vue
|- TodoList.vue

components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue

components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

Orden de las palabras en los nombres de componentes ​

Los nombres de los componentes deben comenzar con las palabras del nivel más alto (a menudo el más general) y terminar con palabras descriptivas.

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue

components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

Componentes de cierre automático ​

Los componentes sin contenido deben cerrarse automáticamente en Componentes de un Solo Archivo, plantillas de cadena y JSX, pero nunca en plantillas en el DOM.

Los componentes de cierre automático comunican que no solo no tienen contenido, sino que están destinados a no tener contenido. Es la diferencia entre una página en blanco en un libro y una etiquetada como "Esta página se dejó en blanco intencionalmente". Tu código también es más limpio sin la etiqueta de cierre innecesaria.

Desafortunadamente, HTML no permite que los elementos personalizados se cierren automáticamente, solo los elementos "vacíos" oficiales. Es por eso que la estrategia solo es posible cuando el compilador de plantillas de Vue puede alcanzar la plantilla antes del DOM y luego servir el HTML compatible con las especificaciones del DOM.

<!-- En Componentes de un Solo Archivo, plantillas de cadenas y JSX -->
<MyComponent></MyComponent>

<!-- En plantillas del DOM -->
<my-component/>

<!-- En Componentes de un Solo Archivo, plantillas de cadenas y JSX -->
<MyComponent/>

<!-- En plantillas del DOM -->
<my-component></my-component>

Formato de nombre de componentes en plantillas ​

En la mayoría de los proyectos, los nombres de los componentes siempre deben estar en PascalCase en Componentes de un Solo Archivo y plantillas de cadenas, pero en kebab-case en las plantillas en el DOM.

PascalCase tiene algunas ventajas sobre kebab-case:

• Los editores pueden autocompletar los nombres de los componentes en las plantillas, porque PascalCase también se usa en JavaScript.
• <MyComponent> es visualmente más diferente de un elemento HTML de una sola palabra que <my-component>, porque hay dos caracteres diferentes (las dos mayúsculas), en lugar de solo uno (el guión).
• Si usas elementos personalizados que no son de Vue en tus plantillas, como un componente web, PascalCase garantiza que tus componentes de Vue permanezcan claramente visibles.

Desafortunadamente, debido a la insensibilidad de mayúsculas y minúsculas de HTML, las plantillas en el DOM deben seguir usando kebab-case.

También ten en cuenta que si ya has invertido mucho en kebab-case, la coherencia con las convenciones de HTML y poder usar el mismo enmarcado en todos tus proyectos puede ser más importante que las ventajas enumeradas anteriormente. En esos casos, también es aceptable usar kebab-case en todas partes.

<!-- En Componentes de un Solo Archivo y plantillas de cadenas -->
<mycomponent/>

<!-- En Componentes de un Solo Archivo y plantillas de cadenas -->
<myComponent/>

<!-- En plantillas en el DOM -->
<MyComponent></MyComponent>

<!-- En Componentes de un Solo Archivo y plantillas de cadenas -->
<MyComponent/>

<!-- En plantillas en el DOM -->
<my-component></my-component>

<!-- En todas partes -->
<my-component></my-component>

Formato de nombre de componentes en JS/JSX ​

Los nombres de los componentes en JS/JSX deben ir siempre en PascalCase, aunque pueden ir en kebab-cased dentro de las cadenas para aplicaciones más sencillas que sólo utilizan el registro global de componentes a través de app.component.

app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent'
  // ...
}

export default {
  name: 'my-component'
  // ...
}

app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent'
  // ...
}

Nombres de componentes de palabras completas ​

Deben preferirse los nombres de componentes con palabras completas en lugar de abreviaturas.

El autocompletado en los editores hace que el esfuerzo de escribir nombres más largos sea muy bajo, mientras que la claridad que proporcionan es inestimable. En particular, deben evitarse siempre las abreviaturas poco comunes.

components/
|- SdSettings.vue
|- UProfOpts.vue

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

Formato de nombre de props ​

Los nombres de props siempre deben usar camelCase durante la declaración. Cuando se utilizan dentro de plantillas dentro del DOM, las props deben ir en kebab-case. Las plantillas de los Componentes de un Solo Archivo y JSX pueden utilizar props en kebab-case o camelCase. El uso de mayúsculas y minúsculas debe ser coherente: si eliges utilizar props con camelCase, asegúrate de no utilizar props con kebab-case en tu aplicación.

props: {
  'greeting-text': String
}

const props = defineProps({
  'greeting-text': String
})

// for in-DOM templates
<welcome-message greetingText="hola"></welcome-message>

props: {
  greetingText: String
}

const props = defineProps({
  greetingText: String
})

// para el SFC - por favor, asegúrate de que el uso de mayúsculas y minúsculas es coherente en todo el proyecto
// puedes utilizar cualquiera de las dos convenciones, pero no recomendamos mezclar dos estilos diferentes.
<WelcomeMessage greeting-text="hi"/>
// o
<WelcomeMessage greetingText="hola"/>

// para plantillas dentro del DOM
<welcome-message greeting-text="hola"></welcome-message>

Elementos multi-atributo ​

Los elementos con múltiples atributos deben abarcar varias líneas, con un atributo por línea.

En JavaScript, dividir los objetos con múltiples propiedades en varias líneas se considera una buena convención, porque es mucho más fácil de leer. Nuestras plantillas y JSX merecen la misma consideración.

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">

<MyComponent foo="a" bar="b" baz="c"/>

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

Expresiones simples en plantillas ​

Las plantillas de los componentes sólo deben incluir expresiones simples, con expresiones más complejas refactorizadas en propiedades o métodos computados.

Las expresiones complejas en tus plantillas las hacen menos declarativas. Debemos esforzarnos en describir qué debe aparecer, no cómo estamos computando ese valor. Las propiedades y métodos computados también permiten reutilizar el código.

{{
  fullName.split(' ').map((word) => {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

<!-- In a plantilla -->
{{ normalizedFullName }}

// The complex expression has been moved to a computed property
computed: {
  normalizedFullName() {
    return this.fullName.split(' ')
      .map(word => word[0].toUpperCase() + word.slice(1))
      .join(' ')
  }
}

// La expresión compleja se ha trasladado a una propiedad computada
const normalizedFullName = computed(() =>
  fullName.value
    .split(' ')
    .map((word) => word[0].toUpperCase() + word.slice(1))
    .join(' ')
)

Propiedades computadas simples ​

Las propiedades computadas complejas deben dividirse en tantas propiedades más simples como sea posible.

computed: {
  price() {
    const basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

const price = computed(() => {
  const basePrice = manufactureCost.value / (1 - profitMargin.value)
  return basePrice - basePrice * (discountPercent.value || 0)
})

computed: {
  basePrice() {
    return this.manufactureCost / (1 - this.profitMargin)
  },

  discount() {
    return this.basePrice * (this.discountPercent || 0)
  },

  finalPrice() {
    return this.basePrice - this.discount
  }
}

const basePrice = computed(
  () => manufactureCost.value / (1 - profitMargin.value)
)
const discount = computed(
  () => basePrice.value * (discountPercent.value || 0)
)
const finalPrice = computed(() => basePrice.value - discount.value)

Comillas en los valores de los atributos ​

Los valores de atributos HTML no vacíos deben ir siempre entre comillas (simples o dobles, lo que no se utilice en JS).

Mientras que los valores de atributos sin espacios no están obligados a tener comillas en HTML, esta práctica a menudo conduce a evitar los espacios, haciendo que los valores de atributos sean menos legibles.

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>

<input type="text">

<AppSidebar :style="{ width: sidebarWidth + 'px' }">

Abreviatura de directivas ​

Las abreviaturas de las directivas (: para v-bind:, @ para v-on: y # para v-slot) deben utilizarse siempre o nunca.

<input
  v-bind:value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-on:input="onInput"
  @focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>

<input
  :value="newTodoText"
  :placeholder="newTodoInstructions"
>

<input
  v-bind:value="newTodoText"
  v-bind:placeholder="newTodoInstructions"
>

<input
  @input="onInput"
  @focus="onFocus"
>

<input
  v-on:input="onInput"
  v-on:focus="onFocus"
>

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

<template v-slot:footer>
  <p>Here's some contact info</p>
</template>

<template #header>
  <h1>Here might be a page title</h1>
</template>

<template #footer>
  <p>Here's some contact info</p>
</template>