Vue警告中的建议同样适用于角度组件。输入应该被视为不可变的，因为你不能阻止它们被父组件覆盖。如果你想使用props来初始化状态，你应该有一个单独的内部状态字段，你可以在一个生命周期挂钩(例如OnChanges或OnInit(中初始化它。
我试图在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〕：避免直接更改道具，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具："选定">
我已经养成了将所有输入标记为只读的习惯，这样我就不会对它们进行变异。