Это хорошая практика, чтобы изменить свойство компонента, помеченное с помощью декоратора ввода - PullRequest
0 голосов
/ 19 апреля 2020

Я пытался создать компонент табуляции в 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});
  }
}

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

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

vue. js: 634 [Vue warn]: Старайтесь не менять объект напрямую, так как значение будет перезаписываться при повторном рендеринге родительского компонента. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Мутация опоры: «выбрано»

1 Ответ

0 голосов
/ 19 апреля 2020

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

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

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