输入类型颜色和 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'

{

    watch: {

         color: function () {

             this.throttledColor()

         }

    },

    methods: {

        // update color every 500 milliseconds

        throttledColor: throttle(function () {

            this.conf.default = this.color

        }, 500)

    }

}

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