Всегда указывайте тип параметра

Этот простой шаг поможет предовратить множество ошибок, отследить которые крайне тяжело. Особенно, если ваш компонент будут использовать другие разработчики. Допустим, у нас есть компонент, в который необходимо передать число. Было бы здорово, если бы мы могли контролировать этот процесс и не допустить, чтобы кто-то передал туда, например, строку. И для этого достаточно всего одной строчки:

props: {
  total: {
    type: Number
  }
}

Теперь, если в параметр попадёт значение другого типа, vue покажет нам предупреждение в консоли. В качестве типа можно передать массив: type: [String, Number]. Но это считается плохой практикой, так как усложняет код. Старайтесь избегать такого подхода и делать каждый входной параметр только одного типа. Но это далеко не всё, мы можем контролировать намного больше.

Ограничиваем возможные значения параметров

Допустим, у нас есть компонент, который показывает аватар пользователя. И он может иметь три стилистических варианта: квадратный(square), со скруглёнными углами(round) и круглый(circle). Соответственно, в параметрах компонента необходимо передать значение для этого параметра:

<Avatar source="img.jpg" style="circle" />

И непосредственно в компоненте:

props: {
  source: {
    type: String
  },
  style: {
    type: String
  }
}

Мы указали тип для параметров, чем обезопасили себя от того, что в компонент передадут, например, число. Но мы всё равно оставляем место для ошибки, ведь строку можно передать любую. Мы ждём один из трёх вариантов: square, round или circle. Если в компонент передадут какую-то другую строку, то ошибки не будет, но компонент будет работать неправильно. И как же нам сообщить разработчику, использующему компонент, о том, что он делает что-то не так? И тут нам на помощь придёт метод validator. Это функция, получающая в качестве аргумента входной параметр и возвращающая true или false. Давайте добавим её к параметру style:

props: {
  source: {
    type: String
  },
  style: {
    type: String,
    validator: (prop) => ['square', 'rounded', 'circle'].includes(prop)
  }
}

Теперь, если вы попытаетесь передать неверную строку, Vue сообщит вам об этом.

Проверяем тип данных внутри массива или объекта

Ещё один вариант для использования валидатора. Например, у нас есть компонент для вывода тэгов. В него нужно передать список тэгов в виде массива:

<TagList :tags="['javascript', 'css', 'frontend']" />

В самом компоненте мы напишем:

prop: {
  tags: {
    type: Array
  }
}

Всё вроде хорошо. Тип параметра указали. Но что если внутри массива нам пришлют не строку? Это может поломать работу компонента. Поэтому лучше бы нам быть уверенными, что всё под контролем:

prop: {
  tags: {
    type: Array,
    validator: (prop) => prop.every(e => typeof e === 'string')
  }
}

Теперь мы можем быть уверены в том, что при попытке передать в компонент неверные данные, мы получим от Vue предупреждение. Валидатор даёт нам практически полный контроль над входными параметрами.

Указывайте дефолтное значение только тогда, когда это необходимо

Для входных параметров можно указать дефолтное значение:

prop: {
  counter: {
        type: Number,
        default: 0
    }
}

Здесь правило очень простое: если параметр обязательный, то дефолтное значение не нужно. Ведь простая логика подсказывает, что если параметр обязательный, то он всегда будет передан (иначе компонент просто не будет работать) и дефолтное значение никогда не будет использовано. А зачем писать лишний код?