Лучшие практики для написания приложений Vue

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

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

Следующие передовые практики предназначены для предотвращения ошибок.

Имена компонентов из нескольких слов

Мы должны использовать имена компонентов из нескольких слов, чтобы предотвратить конфликты с другими встроенными компонентами, такими как transition или component. Исключение составляют только встроенные компоненты и корневой App компонент.

Это также предотвращает конфликты с будущими элементами HTML, поскольку все элементы HTML представляют собой одно слово.

Например, вместо того, чтобы писать:

Vue.component("todo", {
  template: "<p>todo</p>"
});

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

Vue.component("app-todo", {
  template: "<p>todo</p>"
});

Компонент Data должен быть функцией

Свойство data компонента должно быть функцией, которая возвращает объект вместо объекта. Исключение составляет new Vue, где это должен быть объект.

Это связано с тем, что если data является объектом, он будет использоваться всеми экземплярами всех экземпляров компонентов.

Если мы захотим использовать его повторно, мы столкнемся с проблемами перезаписи данных из-за нескольких экземпляров.

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

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

Vue.component("app-todo", {
  data: {
    todo: "eat"
  },
  template: "<p></p>"
});

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

Vue.component("app-todo", {
  data() {
    return {
      todo: "eat"
    };
  },
  template: "<p>{{todo}}</p>"
});

Определения опор должны быть как можно более подробными.

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

Это полезно для документации и предотвращает ошибки при передаче реквизита.

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

Vue.component("app-todo", {
  props: ["task"],
  template: "<p>{{task}}</p>"
});

Вместо этого мы должны написать:

Vue.component("app-todo", {
  props: {
    task: String
  },
  template: "<p>{{task}}</p>"
});

чтобы убедиться, что мы передаем строку в свойство task.

Всегда используйте key с v-for

key с v-for всегда требуется для компонентов для поддержания внутреннего состояния компонентов в поддереве.

Для элементов мы должны добавить его, чтобы сохранить единообразие. Кроме того, ключ используется Vue для оптимизации рендеринга для выполнения самых дешевых мутаций DOM.

Бывают случаи, когда важно не удалять элементы, которые должны оставаться в DOM. Например, если мы хотим сохранить фокус элемента ввода в списке элементов ввода, то мы должны сохранить его в DOM. Мы можем сделать это, установив свойство key.

Например, мы должны добавить опору key следующим образом:

Vue.component("app-todo", {
  data() {
    return {
      todos: [
        { id: 1, text: "eat" },
        { id: 2, text: "drink" },
        { id: 3, text: "sleep" }
      ]
    };
  },
  template: `
  <div>
    <p
      v-for="todo in todos"
      :key="todo.id"
    >
      {{ todo.text }}
    </p>
  </div>
  `
});

Обратите внимание, что значение key для каждой записи должно быть уникальным, чтобы Vue мог правильно идентифицировать элементы.

Избегайте v-if с v-for

Мы никогда не должны использовать v-if с v-for. Это потому, что нам нужно перебрать весь список элементов, а затем проверить каждый из них с помощью v-if.

Это медленнее и добавляет больше логики в шаблон. Вместо этого мы должны использовать вычисленные свойства для фильтрации элементов, а затем вместо этого использовать v-for для перебора элементов в вычисляемом свойстве.

Например, вместо того, чтобы писать:

Vue.component("app-todo", {
  data() {
    return {
      todos: [
        { id: 1, text: "eat", done: true },
        { id: 2, text: "drink", done: true },
        { id: 3, text: "sleep", done: false }
      ]
    };
  },
  template: `
  <div>
    <p
      v-for="todo in todos"
      v-if="todo.done"
      :key="todo.id"
    >
      {{ todo.text }}
    </p>
  </div>
  `
});

Вместо этого мы должны написать:

Vue.component("app-todo", {
  data() {
    return {
      todos: [
        { id: 1, text: "eat", done: true },
        { id: 2, text: "drink", done: true },
        { id: 3, text: "sleep", done: false }
      ]
    };
  },
  computed: {
    doneTodos() {
      return this.todos.filter(t => t.done);
    }
  },
  template: `
  <div>
    <p
      v-for="todo in doneTodos"      
      :key="todo.id"
    >
      {{ todo.text }}
    </p>
  </div>
  `
});

В приведенном выше коде мы просто перебираем записи, возвращаемые функцией doneTodos.

Таким образом, в шаблоне выполняется меньше вычислений и меньше времени на выполнение цикла. v-for рендеринг требует больше усилий, чем вычисление вычисляемого свойства.

Заключение

Чтобы создать быстрое и удобное в обслуживании приложение Vue, мы должны следовать некоторым передовым методикам. Они включают отказ от использования v-for с v-if, добавление key свойств к элементам в v-for и присвоение имен компонентам многословными именами.

data в имени компонента также должно быть функцией в компонентах, а не объектом.