输入类型颜色和 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 throttle 方法来限制每 500 毫秒改变一次颜色。

import throttle from 'lodash/throttle'

{
    watch: {
         color: function () {
             this.throttledColor()
         }
    },
    methods: {
        // update color every 500 milliseconds
        throttledColor: throttle(function () {
            this.conf.default = this.color
        }, 500)
    }

}

请参阅此stackblitz，查看标准颜色与油门颜色更新次数的比较。