输入类型颜色和 v-model 的 Vue 性能问题

Question

我正在设置v-model输入类型颜色。问题是当我更改颜色时，会发生丢帧并且应用程序 FPS 从 60 FPS 飙升到 3 FPS。这是 Vue 性能图的屏幕截图。

我该如何解决这个性能问题？我没有使用 Vue 单文件组件。我只是在单独页面上有一个 Vue，并使用 v-model 来处理输入更改。这是颜色输入代码，

<div v-if="conf.type === 'color'" class="col-1">

    <input type="color" v-model="conf.default">

</div>

是什么导致FPS突然下降？有什么解决办法吗？我在 chrome 版本 83.0 上遇到了这个问题，还没有在其他浏览器中测试过。

注意：我尝试使用@change，它的性能很好，没有性能问题。这是代码

<div v-if="conf.type === 'color'" class="col-1">

    <input type="color" @change="setStyle($event)">

</div>

似乎这只是使用的问题v-model。我会使用它，但我希望实时更新颜色。在这里，@change侦听器在颜色输入失去焦点后更新值。

Answer 1

我猜你正在使用颜色来更新你的 DOM 的一部分。颜色选择器可以大量更新 v-model 值，尤其是在用户拖动以选择颜色时。这在性能上可能会很昂贵，具体取决于您对颜色所做的事情。您可以尝试的一件事是限制颜色更新的频率。<input type="color" v-model="color">在这里，我使用 lodashes节流方法来节流每 500 毫秒更改一次颜色。import throttle from 'lodash/throttle'{&nbsp; &nbsp; watch: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;color: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.throttledColor()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; },&nbsp; &nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; // update color every 500 milliseconds&nbsp; &nbsp; &nbsp; &nbsp; throttledColor: throttle(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.conf.default = this.color&nbsp; &nbsp; &nbsp; &nbsp; }, 500)&nbsp; &nbsp; }}请参阅此stackblitz以比较颜色更新标准与油门的次数。