我有一个具有视口属性的组件。我想听取对此属性的更改,进行一些计算并将可能更改的值反映回属性。我的第一次尝试看起来像这样:
class MyComponent {
@Prop()
viewport: ViewportData
@Watch('viewport)
viewportChanged(newValue: ViewportData, oldValue:ViewportData) {
... do some calculations
// Reflect value back as property
this.viewport = computedViewport;
}
}
这会导致堆栈溢出,因为反映值会触发另一个对watch函数的调用。如果这是一个内部变化,我可以通过一个标志来阻止它。像这样的东西:
class MyComponent {
internalViewportChange = false;
@Prop()
viewport: ViewportData
@Watch('viewport)
viewportChanged(newValue: ViewportData, oldValue:ViewportData) {
if (this.internalViewportChange) {
this.internalViewportChange = false;
return;
}
... do some calculations
// Reflect value back as property
this.internalViewportChange = true;
this.viewport = computedViewport;
}
}
我不喜欢这种方法。并且正在寻找更好的东西。通常可以通过使用getter和setter以及保持实际状态的私有变量来解决此问题:
class MyComponent {
private _viewport: ViewportData
get viewport() {
return this._viewport;
}
set viewport() {
... do some calculations
// Reflect value back as property
this.viewport = computedViewport;
}
}
但是,使用Stenciljs会自动生成getter和setter。有什么好主意吗?
我可能会破坏双向道具设置,并创建一个单向数据流,而不是发出事件。就像是:
class MyComponent
@Event() viewportChanged: EventEmitter;
@Prop() viewport: ViewportData;
@State() _computedViewport: ViewportData;
@Watch('viewport') onViewportChanged(newValue) {
// do calculations
this._computedViewport = computedViewport;
this.viewportChanged.emit(this._computedViewport);
}
在内部,你只能在_computedViewport
上工作,公共viewportProp
只供用户更新。表面上你也可以暴露出做同样事情的@Method()
。