Component dispose?

Help Requests
1

I have the Test Aurelia v1 app.

One route is ListView ( …/#/Vehicle ) with component code:
…
private guid1 = null;
async bind() {
this.guid1 = GuidHelper.NewGuid();
}
attached() {
this.Timer();
}
private Timer() {
console.log(‘ListView’, this.guid1);
setTimeout(() => this.Timer(), 10000);
}
…

Second route is EditView ( …/#/Vehicle/edit/123 ) with component code:
…
private guid1 = null;
async bind() {
this.guid1 = GuidHelper.NewGuid();
}
attached() {
this.Timer();
}
private Timer() {
console.log(‘EditView’, this.guid1);
setTimeout(() => this.Timer(), 10000);
}
…

GuidHelper.NewGuid(); is my own function to generate the GUID.
I click 5 times on List URL and 5 times on edit URL … Switch between ListView and EditView page
The last generated GUID is always display on the HTML page. ${guid1}
For this sample: 22fe4f32-2ef3-48f1-8bf1-f8c8693274da for EditView or 1fd2e006-7b3b-40c9-be79-dbee13094edd for ListView

In the browser console I see 5 Edit and 5 List logs every 10 seconds:
EditView 6fc18f95-9061-4712-9934-f267ff70c9d8
ListView 8325a031-ad0e-4603-9a08-c487a9da99e4
EditView 67ad6c37-1ae8-4b02-bf73-53a47a9f8673
ListView 325fcb21-0039-486f-940f-db01e45c0954
EditView 083cc69f-0d03-460e-9743-9dc36732cca2
ListView 98d192f9-54be-48e3-b688-f74b324e797a
EditView e2b8f937-d938-477c-9411-543d214f3751
ListView d28b5c78-99b7-4139-b482-1f5299db773c
EditView 22fe4f32-2ef3-48f1-8bf1-f8c8693274da
ListView 1fd2e006-7b3b-40c9-be79-dbee13094edd

Does Aurelia engine call destructor/dispose for each component?
I don’t think so.
All 10 components are still alive.

2

The recursive timer you’ve created will prevent the component from being garbage collected. So the timer will continue to log, but it has been removed from the DOM. Use the detached lifecycle function to do cleanup and detect when the component is removed from the DOM.

The Component Lifecycle

1 Like