亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

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

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

婷婷同學_ 2022-10-21 14:21:54
我正在設置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偵聽器在顏色輸入失去焦點后更新值。
查看完整描述

1 回答

?
Smart貓小萌

TA貢獻1911條經驗 獲得超7個贊

我猜你正在使用顏色來更新你的 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以比較顏色更新標準與油門的次數。


查看完整回答
反對 回復 2022-10-21
  • 1 回答
  • 0 關注
  • 161 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號