第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

輸入類型顏色和 v-model 的 Vue 性能問題

輸入類型顏色和 v-model 的 Vue 性能問題

婷婷同學(xué)_ 2022-10-21 14:21:54
我正在設(shè)置v-model輸入類型顏色。問題是當(dāng)我更改顏色時,會發(fā)生丟幀并且應(yīng)用程序 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>是什么導(dǎo)致FPS突然下降?有什么解決辦法嗎?我在 chrome 版本 83.0 上遇到了這個問題,還沒有在其他瀏覽器中測試過。注意:我嘗試使用@change,它的性能很好,沒有性能問題。這是代碼<div v-if="conf.type === 'color'" class="col-1">    <input type="color" @change="setStyle($event)"></div>似乎這只是使用的問題v-model。我會使用它,但我希望實時更新顏色。在這里,@change偵聽器在顏色輸入失去焦點后更新值。
查看完整描述

1 回答

?
Smart貓小萌

TA貢獻1911條經(jīng)驗 獲得超7個贊

我猜你正在使用顏色來更新你的 DOM 的一部分。顏色選擇器可以大量更新 v-model 值,尤其是在用戶拖動以選擇顏色時。這在性能上可能會很昂貴,具體取決于您對顏色所做的事情。您可以嘗試的一件事是限制顏色更新的頻率。


<input type="color" v-model="color">

在這里,我使用 lodashes節(jié)流方法來節(jié)流每 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以比較顏色更新標(biāo)準(zhǔn)與油門的次數(shù)。


查看完整回答
反對 回復(fù) 2022-10-21
  • 1 回答
  • 0 關(guān)注
  • 160 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號