vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問題

更新時(shí)間：2023年04月23日 09:59:54 作者：Hesper_Pan

這篇文章主要介紹了vue函數(shù)input輸入值請(qǐng)求時(shí)延遲1.5秒請(qǐng)求問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

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

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

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

<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)文章

vue3聲明字段名為枚舉的類型詳解
這篇文章主要介紹了vue3聲明字段名為枚舉的類型方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
Django與Vue語法的沖突問題完美解決方法
這篇文章主要介紹了Django與Vue語法的沖突問題完美解決方法，本文給大家分享了兩種解決方法，需要的朋友參考下吧
2017-12-12
Vue項(xiàng)目打包問題詳解(生產(chǎn)環(huán)境樣式失效)
在Vue開發(fā)過程中,項(xiàng)目的打包是一個(gè)非常重要的步驟,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包問題(生產(chǎn)環(huán)境樣式失效)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決
這篇文章主要給大家介紹了關(guān)于vue-cli腳手架打包靜態(tài)資源請(qǐng)求出錯(cuò)的原因與解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue開發(fā)中遇到的跨域問題及解決方法
在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學(xué)習(xí)下。
2020-02-02
vue-element的select下拉框賦值實(shí)例
這篇文章主要介紹了vue-element的select下拉框賦值實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue3使用wangeditor封裝和自定義上傳文件官方教程
這篇文章主要為大家介紹了vue3使用wangeditor封裝和自定義上傳文件的官方教程，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>
2023-06-06
Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn)
在環(huán)保倉管項(xiàng)目中,做了一個(gè)每月對(duì)藥品、消耗品、設(shè)備的進(jìn)出,進(jìn)行統(tǒng)計(jì)百分比,效果好看,后面經(jīng)常在用這個(gè)樣式,下面通過示例代碼分享Vue3 Echarts通用的折線圖帶陰影效果實(shí)現(xiàn),感興趣的朋友一起看看吧
2024-07-07
使用Vue3和Plotly.js繪制動(dòng)態(tài)3D圖表的示例代碼
在數(shù)據(jù)可視化應(yīng)用中,需要將數(shù)據(jù)動(dòng)態(tài)加載到圖表中并進(jìn)行實(shí)時(shí)更新,本文將展示如何使用Plotly.js和Vue.js實(shí)現(xiàn)這一功能,從加載外部數(shù)據(jù)到創(chuàng)建交互式圖表,文中有相關(guān)的代碼示例供大家參考,需要的朋友可以參考下
2024-06-06
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07