Рекомендуется ли изменять свойство компонента, отмеченное декоратором ввода?

Question

Я пытался создать компонент вкладки в Angular и Vue. Vue закричал (выдал ошибку в консоли), когда я изменил свойства компонента. Кажется, что с Angular все в порядке.

<tab [active]="true"></tab>

export class TabComponent implements OnInit {
  @Input() name: string;
  @Input() active = false;

  ngOnInit() {
    // Here I am mutatating an input property which is bad because, 
    // further changes to that input doesn't take effect

    this.active = false;
    console.log({name: this.name, active: this.active});
  }
}

Я лично считаю неправильным изменять свойство input компонента. У меня вопрос, почему команда Angular не добивается этого, выдавая ошибку в консоли.

Vue отобразит это сообщение

vue.js:634 [Предупреждение Vue]: избегайте изменения свойства напрямую, так как значение будет перезаписано всякий раз при повторной визуализации родительского компонента. Вместо этого используйте данные или вычисленное свойство на основе значения свойства. Изменяемая опора: "selected"

Answer 1

Совет в предупреждении Vue применим и к угловому компоненту. Входные данные следует рассматривать как неизменяемые, потому что вы не можете предотвратить их перезапись родительским компонентом. Если вы хотите использовать реквизиты для инициализации состояния, у вас должно быть отдельное поле внутреннего состояния, которое вы инициализируете в одном из хуков жизненного цикла (например, OnChanges или OnInit).

У меня есть привычка отмечать все свои входные данные как доступные только для чтения, чтобы у меня не возникало соблазна их видоизменить.