<el-form-item >
      <el-input
        v-model="formSearch.Num"
        clearable
        :placeholder="locale('dd.Num')"
      />
    </el-form-item>

export default {
  components: {},
  data() {
    return {
      formSearch: {
        Num: '',
        timer: null
      }
    };
  },
   watch: {
    'formSearch.Num': {
      handler(value) {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.handleFormSearch();
        }, 1500)
      },
      deep: true
    }
  },
  methods: {
    locale,
    handleFormSearch() {
     //查詢方法
    }
  }
};

vue頁面許多input框會(huì)導(dǎo)致輸入延遲

做項(xiàng)目的時(shí)候第一次遇到這個(gè)問題（layui+vue），先來看我出現(xiàn)的問題，如圖一我頁面上有個(gè)雙重for循環(huán)，且里面還使用到了過濾器見圖二，這樣下來我頁面的數(shù)據(jù)量一旦非常大，對(duì)v-model是很不友好的，會(huì)造成v-model渲染會(huì)很慢

最好的解決方法要么是把這些for循環(huán)做的事去讓后端處理，前端只做數(shù)據(jù)的展示，再要么就是在v-model上改成 v-model.lazy(我用的這個(gè)方法)讓v-model延遲

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)評(píng)論列表功能
本文通過實(shí)例代碼給大家介紹了vue實(shí)現(xiàn)評(píng)論列表功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2019-10-10
Vue組件間傳值的實(shí)現(xiàn)解析
組件是?vue.js?最強(qiáng)大的功能之一，而組件實(shí)例的作用域是相互獨(dú)立的，這就意味著不同組件之間的數(shù)據(jù)無法相互引用，這篇文章主要介紹了Vue組件間傳值的實(shí)現(xiàn)
2022-09-09
Vue2中使用Monaco?Editor的教程詳解
Monaco-editor,一個(gè)vs?code?編輯器,這篇文章主要為大家詳細(xì)介紹了如何在Vue2中使用Monaco?Editor,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
vue transition 在子組件中失效的解決
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
詳解vue-Resource（與后端數(shù)據(jù)交互）
本篇文章主要介紹了vue-Resource（與后端數(shù)據(jù)交互），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-01-01
Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽
本文主要介紹了Vue.js結(jié)合SortableJS實(shí)現(xiàn)樹形數(shù)據(jù)拖拽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
VUE2.0+Element-UI+Echarts封裝的組件實(shí)例
下面小編就為大家分享一篇VUE2.0+Element-UI+Echarts封裝的組件實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-03-03
vue全局使用axios的操作
這篇文章主要介紹了vue全局使用axios的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-09-09
vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下
2018-04-04
vue3常用的指令之v-bind和v-on指令用法
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12