Skip to content

__vfrag__ references prevent GC of Vue objects #2161

@elsassph

Description

@elsassph

Unless the host DOM element is fully removed (from DOM and from references), __vfrag__ references seem to prevent full garbage collection of the Vue objects.

Using Chrome Profiler, after the vm object is destroyed we can still find references through __frag__ between the DOM and the Vue objects:

var data = {
    items:[
        { title:'Item 1', position:[0, 0] },
        { title:'Item 2', position:[200, 0] },
        { title:'Item 3', position:[0, 100] },
        { title:'Item 4', position:[200, 100] }
    ]
};

Vue.component('tile', {
    props: ["item"],
    template:`
        <div class="tile" :style="position">
            <b>{{item.title}}</b>
        </div>`,
    computed: {
        position: function() {
            var pos = this.item.position;
            return `left:${pos[0]}px; top:${pos[1]}px`;
        }
    }
});

var app = new Vue({
    el: '#app',
    template:`
        <div class="grid">
            <tile v-for="item in items" :item="item"/>
        </div>`,
    data: data
});

setTimeout(function() {
    app.$destroy();
    app = null;
    console.info('destroyed');
}, 2000);

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions