angular - 更改标有 Input 装饰器的组件属性是一种好习惯吗

Question

我试图在 Angular 和 Vue 中构建一个选项卡组件。当我更改组件的 Prop 时，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]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected"

Answer 1

Vue 警告中的建议同样适用于 Angular 组件。输入应该被视为不可变的，因为您无法阻止它们被父组件覆盖。如果您想使用 props 来初始化状态，您应该有一个单独的内部状态字段，您可以在其中一个生命周期 Hook (例如 OnChanges 或 OnInit)中初始化该字段。

我已经养成了将所有输入标记为只读的习惯，这样我就不会想改变它们。