It seems like calling component.destroy() does not actually destroy the component from the lightning cache. I am having to manually destroy my component to avoid duplicated application events as seen here, but it seems like it is not behaving the way I expect it to.
Whichever component is loaded first in the queue will not be recreated when navigating back to it. Here is the example. https://vid.me/QGCY
TestTabA.cmp
<aura:component implements="force:appHostable">
<ltng:require scripts="{!join(',', '/resource/Mynamespace__JQuery' )}" afterScriptsLoaded="{!c.initJS}" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="aura:locationChange" action="{!c.updateDestroy}"/>
</aura:component>
TestTabAController.js
({
initJS : function(component, event, helper) {
if (component.isValid()) {
console.log("loaded JS for tab A");
}
},
doInit : function(component, event, helper) {
if (component.isValid()) {
console.log("called init for tab A");
}
},
updateDestroy : function(cmp, event, helper) {
cmp.destroy();
},
})
TestTabB.cmp
<aura:component implements="force:appHostable">
<ltng:require scripts="{!join(',', '/resource/Mynamespace__JQuery' )}" afterScriptsLoaded="{!c.initJS}" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler event="aura:locationChange" action="{!c.updateDestroy}"/>
</aura:component>
TestTabBController.js
({
initJS : function(component, event, helper) {
if (component.isValid()) {
console.log("loaded JS for tab B");
}
},
doInit : function(component, event, helper) {
if (component.isValid()) {
console.log("called init for tab B");
}
},
updateDestroy : function(cmp, event, helper) {
cmp.destroy();
},
})