为什么Angular中@Input传入的数组无需@Output即可在外部被更新

核心原因 #

这个现象和Angular框架的绑定逻辑无关，是JavaScript引用类型的固有特性：

• JavaScript中的数组属于引用类型，你通过@Input传递数组时，传递的不是数组的完整拷贝，而是数组在堆内存中的存储地址
• 父组件的this.list和子组件的@Input() items两个变量，指向的是内存中完全相同的数组实例
• 你在子组件调用this.items.push()修改数组内容时，操作的就是这个共用的数组实例，父组件持有同一个引用，自然能同步看到更新。

为什么基础类型不会出现这个现象？ #

字符串、数字、布尔值等属于值类型，@Input传递时会拷贝完整的值，父子组件的两个变量是完全独立的，修改其中一个不会影响另一个，只有这种场景下才必须通过@Output事件通知父组件更新。

注意事项 #

这种直接修改传入引用的写法不推荐，违反了Angular单向数据流的设计规范：

• 容易出现不可预期的副作用，后续代码维护时很难定位数据被哪里修改
• 如果你在子组件中是直接替换整个数组引用（比如写this.items = [新数组]），这种操作不会影响父组件的list变量，必须通过@Output通知父组件自行更新。
  最佳实践是所有父组件数据的修改都由父组件自身完成，子组件只通过@Output抛出修改事件。

内容的提问来源于stack exchange，提问作者Diogo Machado