Nesting v-masonry-tile in v-masonry causing slowdown

tb-b commented 6 years ago

This is causing a significant slow down after several redraws (via router link for example). The issue seems to be in nesting v-masonry-tile inside of v-masonry like in docs:

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div v-masonry-tile class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

Test scenario:

Array of 6 objects, setup as above

First run:

masonry.plugin.js outputs 6 elements (correctly)

Second run (redraw via router-link):

masonry.plugin.js outputs 18 elements (2 * 6 + 6)

Third run (redraw via router-link):

masonry.plugin.js outputs 42 elements (2 * 18 + 6)

As you can imagine this will clog your throughput pretty quickly, especially since every call is waits for imagesloaded.js to finish.

The easiest solution is to remove v-masonry-tile declaration from your HTML element, like this:

<div v-masonry transition-duration="0.3s" item-selector=".item">
    <div class="item" v-for="(item, index) in blocks">
       <!-- block item markup -->
    </div>
</div>

shershen08 commented 6 years ago

that looks like a major issue! thanks for bringing it in @tombalev do you maybe have a simplified repo/app that one could clone to reproduce this issue ?

tb-b commented 6 years ago

not at the moment, but you can do something simple like vue-cli with vue-router, place vue-masonry grid on one page and then put console.log to vue-masonry masonry.plugin.js functions. This will get triggered on every router change X times.

Is there any significant use for that v-masonry-tile anyway? Seems to be working alright without it.

Hadrien-DELAITRE commented 6 years ago

shershen08 / vue-masonry