I am encountering a problem with setting the v-model on an input of type color. Whenever I change the color, there is a noticeable drop in frame rate and the application's FPS spikes from 60 to 3. You can see it reflected in the Vue performance graph screenshots below:
https://i.stack.imgur.com/2t4h2.png
https://i.stack.imgur.com/6okPE.png
How can I address this performance issue? It's worth mentioning that I am not utilizing Vue single-file components. Instead, I only have a Vue instance on a standalone page and rely on v-model to manage input changes. Below is the code snippet for the color input:
<div v-if="conf.type === 'color'" class="col-1">
<input type="color" v-model="conf.default">
</div>
What could be causing such a sudden drop in FPS? Is there a solution to mitigate this issue? This behavior is observed on Chrome version 83.0, although tests on other browsers are pending.
Please note that implementing @change alleviates the performance problems. Here is the revised code snippet:
<div v-if="conf.type === 'color'" class="col-1">
<input type="color" @change="setStyle($event)">
</div>
It seems that the issues arise specifically when using v-model. While I would prefer to utilize it for real-time color updates, the @change listener ensures the value is updated once the color input loses focus.