更改标有 Input 装饰器的组件属性是否是一种好习惯答案

【问题标题】：Is it a good practice to change a component property marked with the Input decorator更改标有 Input 装饰器的组件属性是否是一种好习惯
【发布时间】：2020-08-01 10:15:40
【问题描述】：

我试图在 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 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“选择”

【问题讨论】：

显示一些代码。不清楚你的意思..？
@MikeOne 希望此代码示例对您有所帮助。谢谢
谢谢。您无法通过这种方式将 Vue 道具与 Angular 进行比较，在某些有效场景中，您希望在组件内“改变”您的输入。例如，输入可以是一次性配置对象或值，可用于设置初始变量，但以后可以更改。输入仅由 angular 设置一次（这与 Vue 中的 prop 不同）。当然 - 不可变通常是一种很好的做法，但这绝对不应该在 Angular 中发出警告。
@MikeOne 哦，这是设计使然。我在开发过程中意识到了这一点。改变输入属性会阻止它接收未来的更改。感谢您的澄清

标签： angular vue-props angular-input

【解决方案1】：

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

我已经养成将所有输入标记为只读的习惯，因此我不想改变它们。

【讨论】：

正是我认为应该抛出错误或某种消息的原因，如 Vue 中所示