Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

After calling $destroy (), @ click binding events still exist #7086

Closed
git8023 opened this issue Nov 20, 2017 · 3 comments

Comments

Projects
None yet
4 participants
@git8023
Copy link

commented Nov 20, 2017

Version

2.5.1

Reproduction link

https://gitee.com/osby/learn-js/blob/master/vue/example/9/vue.live.html
http://jsfiddle.net/0bxfga8q/

Steps to reproduce

<div id="app">
    <p>{{result}}</p>
    <p>
        <button @click="change">Change</button>
        <button @click="destroy">Destroy</button>
    </p>
</div>
    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello World",
            result: ""
        },
        methods: {
            change: function () {
                this.result = this.message   " - "   new Date().toLocaleString();
                throw "123";
            },
            destroy: function () {
                this.$destroy();
            }
        });

Click button:Destroy, and click button:Change.

What is expected?

Hope in the calling $destroy(), remove the DOM event object. To prevent invalid Ajax requests.
thanks very much.

What is actually happening?

The console output information: Uncaught 123


Asynchronous validation event in the form.

@posva

This comment has been minimized.

Copy link
Member

commented Nov 20, 2017

I provided an editable repro
For the moment, $destroy get rids of event listeners setup on the component only.
But, it looks like there're still some references to the events because if the element is removed, the event listeners are not freed
I do agree, event listeners on native elements should be removed when the instance is destroyed

@yyx990803

This comment has been minimized.

Copy link
Member

commented Nov 20, 2017

This is intended behavior. When a vm is destroyed, its associated piece of DOM is considered discarded. When managed by Vue itself, the DOM will be detached and garbage collected, and all modern browsers correctly discards event listeners in the process as well.

It is usually not recommended to call $destroy() imperatively, and once you call that, the DOM that's left behind should not be reused. Calling $destroy(true) removes the DOM at the same time.

@yyx990803 yyx990803 closed this Nov 20, 2017

@amorphius

This comment has been minimized.

Copy link

commented Mar 3, 2018

I've tried $destroy(true) but DOM stays the same

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.