入力タイプの色とvモデルに関するVueのパフォーマンスの問題

debugcn 投稿 Dev

マニヤに電話する

v-model入力タイプの色をオンに設定しています。問題は、色を変更すると、フレームドロップが発生し、アプリケーションのFPSが60FPSから3FPSに急上昇することです。これが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リスナーは、色入力がフォーカスを失った後に値を更新します。

日

色を使ってDOMの一部を更新していると思います。カラーピッカーは、特にユーザーがドラッグして色を選択している場合に、v-model値を大幅に更新できます。これは、色で何をしているのかによっては、パフォーマンスにコストがかかる可能性があります。あなたが試みることができる1つのことはあなたの色が更新される頻度を絞ることです。

<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を参照して、色が標準とスロットルで更新される回数の比較を確認してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事