Angular 2，带setter 的@Input 与不带setter 的@Input 的行为是否不同？

Question

我想知道是否有人可以对此进行详细说明。使用 setter 的 @Input() 与不使用 setter 的 @Input() 在变化检测方面的行为是否不同？

例如：

@Input() something: SomeType;

-vs-

private _something;

@Input() set something(something: SomeType ) {
  this._something = something;
}

get something(): SomeType {
  return this._something;
}

明显的区别是 setter/getter 允许 @Input() 有一些额外的逻辑。但这是否会以不同的方式影响变化检测，而不是我在没有 setter 的情况下使用 @Input()？

Answer 1

从 angular 的角度来看，唯一的区别是您有机会挂钩那些 @Input() 的 get/set 函数。

从 Javascripts 的角度来看，第一个将是 "just" a 属性，第二个将使用 Object.defineProperty.

笨蛋：https://plnkr.co/edit/1koamZCvyG5YAIPNB73r?p=preview

编译代码 setter:

Object.defineProperty(AppComponent.prototype, "test1", {
    get: function () { return this._test1; },
    set: function (val) {
        console.log('test1 was set!');
        this._test1 = val;
    },
    enumerable: true,
    configurable: true
});
__decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
    __metadata('design:type', Object), 
    __metadata('design:paramtypes', [Object]) /* difference? */
], AppComponent.prototype, "test1", null);

带OUT的编译代码setter:

__decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["Input"])(), 
    __metadata('design:type', Object)
], AppComponent.prototype, "test2", void 0);

均使用 angular-cli 编译：ng build.

Answer 2

angular 变化不大。不会设置输入或不会更频繁地调用 setter。然而，需要注意的是 setter 中有更多逻辑可以触发另一个变化检测。如果有，angular 将抛出已知错误（仅在开发模式下）

Expression has changed after it was checked.

因此，变化检测器的行为并没有不同，但可能会出现问题，具体取决于您在 setter

中放置的额外逻辑

Angular 2，带setter 的@Input 与不带setter 的@Input 的行为是否不同？

Angular 2, Does @Input with a setter behave differently than @Input without a setter?

javascript

angular2-changedetection

angular