在setter方法中添加判断条件,确保只有当新值与旧值不同时才会更新。
例如,假设我们有以下组件:
@Component({
selector: 'app-example',
template: `
- {{user.name}}
`
})
export class ExampleComponent {
private _users: User[];
@Input()
set users(users: User[]) {
if (!this._users || this._users.length !== users.length || !this._users.every((u, i) => u === users[i])) {
this._users = users;
// do something with updated users
}
}
get users(): User[] {
return this._users;
}
}
在这个组件中,我们有一个输入属性users
。每当users
属性的值发生变化时,setter
方法会被调用。由于users
可能包含相同的元素,因此我们只想在旧值和新值不同的情况下才更新。
我们使用以下条件进行检查:
null
,则更新。如果以上条件都不满足,则我们认为用户数组没有改变,因此不需要更新。
通过这种方式,我们可以防止在重复值没有改变时不必要地调用更新方法,从而提高了应用程序的性能。