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

В этой статье мы рассмотрим некоторые распространенные ошибки при разработке приложений Vue.

Реактивность

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

Один случай, когда он не обновит что-либо, - это когда элементы добавляются или удаляются из объекта.

Мы можем убедиться, что он обновляется, написав:

<template>
  <div id="app">
    <p v-for="(v, k) in ages">
      {{k}} - {{v}}
      <button @click="remove(k)">Remove</button>
    </p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      ages: {
        Jane: 20,
        Alex: 21,
        Mary: 19
      }
    };
  },
  methods: {
    remove(key) {
      this.$delete(this.ages, key);
    }
  }
};
</script>

В приведенном выше коде мы должны вызвать $this.delete со свойством компонента, из которого мы хотим удалить записи, и ключом записи, из которой нужно удалить запись.

Точно так же он не может определить, обновляются ли значения. Мы можем использовать метод this.$set для обновления значений. Например, мы можем написать:

<template>
  <div id="app">
    <button @click="random">Random Age</button>
    <p v-for="(v, k) in ages">{{k}} - {{v}}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      ages: {
        Jane: 20,
        Alex: 21,
        Mary: 19
      }
    };
  },
  methods: {
    random() {
      for (const k of Object.keys(this.ages)) {
        this.$set(this.ages, k, (Math.random() * 20).toFixed(0));
      }
    }
  }
};
</script>

В методе random у нас есть цикл for...of, который вызывает this.$set со свойством для обновления в качестве первого аргумента, ключ записи для обновления в качестве второго аргумента и значение, которое мы хотим обновить в качестве третьего аргумента.

Кроме того, мы должны использовать $this.set для обновления значения массива новым значением. Например, мы можем сделать это следующим образом:

<template>
  <div id="app">
    <button @click="random">Random Age</button>
    <p v-for="a in ages">{{a.name}} - {{a.age}}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      ages: [
        { name: "Jane", age: 20 },
        { name: "Alex", age: 21 },
        { name: "Mary", age: 19 }
      ]
    };
  },
  methods: {
    random() {
      for (let i = 0; i < this.ages.length; i++) {
        const newVal = {...this.ages[i], age: (Math.random() * 20).toFixed(0)}
        this.$set(this.ages, i, newVal);
      }
    }
  }
};
</script>

В приведенном выше коде мы вызываем this.$set, чтобы установить значение каждой записи, передавая массив, который мы хотим изменить, в качестве первого аргумента. Индекс записи, которую мы хотим изменить в качестве второго аргумента, и значение, которое мы хотим установить в качестве третьего аргумента.

Vue также не может определить, когда изменяется длина массива. Чтобы обрезать массив, мы должны использовать slice.

Например, если у нас есть компонент, в котором мы хотим усечь массив со 100 записей до 5 одним нажатием кнопки, мы можем написать:

<template>
  <div id="app">
    <button @click="truncate">Truncate</button>
    <p v-for="n in nums">{{n}}</p>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      nums: new Array(100).fill(Math.random())
    };
  },
  methods: {
    truncate() {
      this.nums = this.nums.slice(0, 5);
    }
  }
};
</script>

Мы назначаем новый массив, возвращенный из slice, в this.nums в методе truncate, чтобы выполнить усечение.

Плагины

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

Разделители

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

HTML-интерполяция

Мы можем использовать директиву v-html для отображения обработанного необработанного HTML-кода. Мы не можем использовать привязки, реквизиты и директивы в необработанных строках HTML, которые мы используем с v-html. Чтобы использовать их, мы должны вместо этого определить компоненты.

Например, мы можем написать:

<template>
  <div id="app">
    <div v-html="msg"></div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      msg: "<h1>Hello world</h1>"
    };
  }
};
</script>

В приведенном выше коде у нас есть поле msg с тегом h1. Мы можем установить его как значение для v-html и сохранить форматирование h1.

Заключение

Система реактивности Vue несовершенна. Для обновления данных потребуется помощь в случае изменений в массиве или объекте. Кроме того, мы должны позвонить Vue.use, чтобы зарегистрировать плагины, прежде чем мы сможем их использовать.

Пользовательские разделители доступны только в автономной сборке Vue, которую мы включаем в тег скрипта. Интерполяцию HTML можно выполнить с помощью директивы v-html.