vue函數(shù)input輸入值請求時延遲1.5秒怎么解決

這篇文章主要介紹“vue函數(shù)input輸入值請求時延遲1.5秒怎么解決”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vue函數(shù)input輸入值請求時延遲1.5秒怎么解決”文章能幫助大家解決問題。

vue函數(shù)input輸入值請求時延遲1.5秒請求

做了一個input輸入值后，延遲一段時間自動根據(jù)輸入內(nèi)容搜索功能

目的：避免當用戶連續(xù)輸入連續(xù)請求接口的問題，達到當用戶輸入完成之后再請求。

<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框會導致輸入延遲

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

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

關(guān)于“vue函數(shù)input輸入值請求時延遲1.5秒怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。