Destroy the insctance
Closed this issue · 5 comments
I am using your awesome plugin with my VueJS app, but I need to prevent memory lacks to destroy the instance... And I didn't find the way how to do it in the documentation...
Is there some methods to destroy it? Something like this?
var pick = new Picker(element, options); ... pick.destroy();
No, currently there's no such method. What would that method have to do? Just remove the picker element from the DOM?
If you call pick.domElement.remove(), does that help with the memory leaks? Maybe a few events need cleanup as well.
Could you make a demo which shows these memory leaks when using Vue?
Ok, I'll try this...
I don't have any examples, the fact is in VueJS documentation it's telling us to be carefull about memory lack using external plugin because the Dom is not totally destroyed, so we should destroy it manually... I think the way you gave me is a good example, I didn't know about it. Thanks
EDIT :
When i do this, it's saying to me that domElement is undefined ... ? Normal?
2nd EDIT :
I found the way, pick.settings.parent.remove(), thanks for your help 👍
Nowadays when many people use vdom-style libraries like React or Vue, it is pretty standard to include a destroy-method which can be used before the parent node disappears OR is altered, in which case leaving old event handlers in is not desirable (the thing is that the parent may not be removed from the DOM; it might change purpose completely, though).
In the case of this library it seems to me that the actions that should be done in a destroy-method would be:
- Remove the DOM-elements generated by this library
- Remove any event listeners added to elements outside of the library-generated DOM-elements
Would you accept a PR implementing such a destroy-method?
@codeclown - Thanks, I've been meaning to fix this for a while! What complicates things a little are two addEvent(window, ...) listeners in the dragTrack() utils function as well.
If you have a fix, please submit a PR :)