Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.

В этой статье мы рассмотрим, как организовать наш код Vue для ясности и удобочитаемости.

Элементы с несколькими атрибутами должны занимать несколько строк, по одному атрибуту на строку.

Мы должны писать элементы с несколькими атрибутами с одним атрибутом в строке, чтобы мы могли легко прочитать имя и значение каждого атрибута.

Например, для максимальной читаемости мы можем написать следующее:

index.js :

Vue.component("foo-component", {
  props: {
    foo: String,
    bar: String,
    baz: String
  },
  template: "<p>{{foo}} {{bar}} {{baz}}</p>"
});
new Vue({
  el: "#app"
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <foo-component 
        foo="foo" 
        bar="bar" 
        baz="baz"
      >
      </foo-component>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Шаблоны компонентов должны включать только простые выражения, а более сложные выражения реорганизованы в вычисляемые свойства или методы.

Шаблоны компонентов должны содержать только простые выражения, потому что шаблоны не должны содержать много логики. Логика должна заключаться в компонентах, если это не неизбежно.

Мы можем использовать вычисляемые свойства и методы, чтобы разрешить повторное использование кода.

Например, вместо написания:

index.js :

new Vue({
  el: "#app",
  data: {
    fullName: "jane smith"
  }
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ fullName.split(' ').map((word)=> { return word[0].toUpperCase() +
      word.slice(1) }).join(' ') }}
    </div>
    <script src="index.js"></script>
  </body>
</html>

У которого есть длинное шаблонное выражение:

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

Мы должны переместить выражение в вычисляемое свойство следующим образом:

index.js :

new Vue({
  el: "#app",
  data: {
    fullName: "jane smith"
  },
  computed: {
    normalizedFullName() {
      return this.fullName
        .split(" ")
        .map(word => {
          return word[0].toUpperCase() + word.slice(1);
        })
        .join(" ");
    }
  }
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ normalizedFullName }}
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде есть гораздо более короткое выражение JavaScript в шаблоне, поскольку мы переместили логику в вычисляемое свойство. Читать его намного легче, чем первый пример.

Сложные вычисляемые свойства следует разделить на как можно больше простых свойств.

Мы должны разделить вычисленные свойства на более простые свойства, чтобы их было легче тестировать, читать, и мы также можем легко их изменить, если нам нужно.

Простые выражения легче проверить эту сложную логику. Они также должны иметь описание, чтобы отличать их друг от друга.

Небольшие объекты также имеют модульную конструкцию, поэтому их легче менять. Например, мы можем написать следующий код для записи нескольких вычисляемых свойств для вычисления общей цены:

index.js :

new Vue({
  el: "#app",
  data: {
    prices: [1, 2, 3, 1, 3],
    discountRate: 0.1,
    taxRate: 0.15
  },
  computed: {
    subTotal() {
      return this.prices.reduce((a, b) => a + b, 0);
    },
    discountedTotal() {
      return this.subTotal * (1 - this.discountRate);
    },
    tax() {
      return this.discountedTotal * this.taxRate;
    },
    total() {
      return this.discountedTotal + this.tax;
    }
  }
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      {{ total }}
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде у нас есть вычисляемые свойства subTotal, discountedTotal, tax и total для вычисления общей цены путем их объединения.

Это короче и менее логично.

Непустые значения атрибутов HTML всегда должны заключаться в кавычки (одинарные, двойные или обратные кавычки, в зависимости от того, что не используется в JS).

Атрибуты без пробелов не обязаны заключать в кавычки в HTML. Однако такая практика приводит к тому, что мы избегаем пробелов, что делает атрибуты менее читаемыми.

Чтобы сделать значения атрибутов более читабельными, мы должны написать что-то вроде следующего кода:

index.js :

Vue.component("foo-component", {
  template: "<p>foo</p>"
});
new Vue({
  el: "#app",
  data: {
    width: 100
  }
});

index.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>App</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <foo-component :style="{ width: `${width}px` }"></foo-component>
    </div>
    <script src="index.js"></script>
  </body>
</html>

В приведенном выше коде мы использовали строку шаблона для установки ширины, поэтому мы использовали обратную кавычку внутри. Снаружи мы использовали двойные кавычки, чтобы заключить объект, который мы установили как значение style.

Сокращения директив (: для v-bind :, @ для v-on: и # для v-slot) следует использовать всегда или никогда.

Мы должны быть последовательны, хотим ли мы использовать сокращения директив или нет.

Поэтому вместо того, чтобы писать:

<input v-bind:value="val" :placeholder="instruction" />

Мы должны написать:

<input :value="val" :placeholder="instruction" />

Заключение

Мы должны быть последовательны в именовании и использовании сокращений. Кроме того, разделение различных выражений на их собственное вычисляемое свойство упрощает их обслуживание. Поддерживать короткие фрагменты кода легче, чем более длинные.

В шаблонах также не должно быть слишком много логики. Если нам нужно больше логики, они должны быть вычисляемым свойством.