In Vue+DOM.watch(), MUTATION_OBSERVER will run out of memory with large v-for

[TurboControl]

I have a Vue project that uses a mix of Vue-FontAwesome components as well as the legacy <i> HTML tags in cases where I cannot use a Vue component. Thus I need the functionality of DOM.watch(). There is a case when I have a large number (500) of v-for components and they are manipulated, mutation observer gets into a bad loop, the browser page footprint goes from 200MB to 2500MB in a few seconds and crashes the browser. Chrome/Firefox/Safari tested.

I was working around this by paging the items to a limit of 50 at a time, but the customer demands to have 500 items to be visible at once. I worked around 3 other scaling problems that Vue has, but this 4th one requires the DOM watch to be paused for a moment.

I've forked the repo and have been able to verify that if I check for !config.observeMutations inside MUTATION_OBSERVER, then everything works great!

I set my package to my fork:
"@fortawesome/fontawesome-svg-core": "../Font-Awesome/js-packages/@fortawesome/fontawesome-svg-core",
In my project, I call config.observeMutations = false then config.observeMutations = true after the render settles.

I have a PR to reference this issue.

[tagliala]

Hi!

Thanks for being part of the Font Awesome Community and thanks for this detailed report.

@robmadole @mlwilkerson could you please take a look?