为何Angular输入属性Setter无变更时仍被调用？

问题根源在于Angular对输入属性的变更检测是基于引用比较的：哪怕数组内容完全一致，只要父组件传递了新的数组实例（比如每次传[]），Setter就会被触发，导致doStuff()频繁执行。

以下是几种可行的解决方式：

1. 在Setter中比较数组内容 #

通过对比数组的实际内容而非引用，决定是否更新内部状态并执行逻辑。

针对字符串数组的简易比较 #

自己实现数组内容对比函数，适合简单的字符串数组场景：

private _myInput: string[] = [];
@Input()
get myInput(): string[] {
  return this._myInput;
}
set myInput(myInput: string[]) {
  if (!this.arraysAreEqual(myInput, this._myInput)) {
    this._myInput = [...myInput]; // 浅拷贝避免外部修改影响内部状态
    this.doStuff();
  }
}

// 自定义字符串数组比较函数
private arraysAreEqual(a: string[], b: string[]): boolean {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}

通用场景：使用深度比较工具 #

如果数组包含复杂对象，可借助lodash的isEqual函数做深度对比（需先安装lodash）：

import { isEqual } from 'lodash';

private _myInput: string[] = [];
@Input()
get myInput(): string[] {
  return this._myInput;
}
set myInput(myInput: string[]) {
  if (!isEqual(myInput, this._myInput)) {
    this._myInput = [...myInput];
    this.doStuff();
  }
}

简易但有局限的JSON序列化比较 #

通过JSON.stringify转换为字符串后对比，适合结构简单的数组，但注意：对象顺序、undefined等特殊值会影响对比结果，不推荐用于复杂场景：

private _myInput: string[] = [];
@Input()
get myInput(): string[] {
  return this._myInput;
}
set myInput(myInput: string[]) {
  if (JSON.stringify(myInput) !== JSON.stringify(this._myInput)) {
    this._myInput = [...myInput];
    this.doStuff();
  }
}

2. 使用ngOnChanges钩子检测变更 #

如果父组件修改的是同一个数组引用的内容（而非传递新实例），Setter不会触发，此时可通过ngOnChanges钩子监听输入属性变更：

import { SimpleChanges } from '@angular/core';

// ...

private _myInput: string[] = [];
@Input() myInput: string[] = [];

ngOnChanges(changes: SimpleChanges) {
  if (changes['myInput']) {
    const current = changes['myInput'].currentValue;
    const previous = changes['myInput'].previousValue;
    
    // 处理初始加载时previousValue为undefined的情况
    if (!previous || !this.arraysAreEqual(current, previous)) {
      this._myInput = [...current];
      this.doStuff();
    }
  }
}

private arraysAreEqual(a: string[], b: string[]): boolean {
  if (a.length !== b.length) return false;
  for (let i = 0; i < a.length; i++) {
    if (a[i] !== b[i]) return false;
  }
  return true;
}

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