vue怎么實現(xiàn)lodash的debounce防抖

這篇文章主要介紹“vue怎么實現(xiàn)lodash的debounce防抖”，在日常操作中，相信很多人在vue怎么實現(xiàn)lodash的debounce防抖問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”vue怎么實現(xiàn)lodash的debounce防抖”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

事情起因在：我使用element ui框架里的遠程搜索框，在單選時，組件內(nèi)部已經(jīng)做了防抖，query是在一段時間內(nèi)的字符串。但是在多選時，并沒有做防抖，而是每輸入一個字符都要向后臺發(fā)一次請求，所以必須防抖，官方推薦使用lodash的debounce

在解決這個問題時，我遇到的坎兒主要有以下：

我首先在項目里用npm安裝lodash，先全局安裝，然后安裝到項目

npm install -g lodash
npm install --save lodash

安裝后，我就在我要用防抖的組件里，引入lodash

var lodash = require('lodash');

以下就開始了走彎路

我百度后，查詢到debounce總和keyup一起使用，所以我就在我的搜索框里綁定了keyup事件，但是綁定的事件并沒有生效，通過查詢得知，在element ui封裝了input，所以要在后面加上.native才可以覆蓋原來的事件

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  placeholder="請選擇跟進HR"
  @keyup.native="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

keyup成功綁定事件后，我發(fā)現(xiàn)得到的結(jié)果并不是我想要的，因為keyup綁定事件里得到的參數(shù)是我在鍵盤里輸入的一個字符，但我想要得到的是輸入后的整個字符串。所以我就又開始使用watch監(jiān)聽this.AddCandidateFrom.follow_hr

監(jiān)聽this.AddCandidateFrom.follow_hr后，我發(fā)現(xiàn)并沒有用，因為它代表的是多選框中已經(jīng)選中了的字符串，正在輸入的字符串不會記錄進去，所以我又回退到使用遠程搜索本身的方法，綁定remote-methods

<el-select
  v-model="AddCandidateFrom.follow_hr"
  filterable
  multiple
  remote
  placeholder="請選擇跟進HR"
  :remote-method="getRemoteFollow"
  :loading="followLoading"
  class="select-item">
  <el-option
    v-for="item in followOption"
    :key="item.value"
    :label="item.label"
    :value="item.value">
  </el-option>
</el-select>

綁定了remote-method方法后，我就使用傳統(tǒng)的方法定義綁定的方法（），沒有使用es6簡寫的方法，這是因為，使用lodash.debounce返回的是一個函數(shù)。如果有參數(shù)，則在function空的形參列表里加入

getRemoteFollow: lodash.debounce(function () {
  console.log('111');
}, 300),

vue是什么

Vue是一套用于構(gòu)建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區(qū)別是，使用Vue可以自底向上逐層應(yīng)用，其核心庫只關(guān)注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。

到此，關(guān)于“vue怎么實現(xiàn)lodash的debounce防抖”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>