婷婷同學(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ù)。
添加回答
舉報
0/150
提交
取消