導語：隨著接觸的項目增加，很多項目都是遇到同樣的問題，而每次都是使用一貫的手法進行處理。有時候有些方法并不是那么的優雅甚至有些冗余，所以自己也想開始嘗試不同的方法去解決同樣的問題。

我經常在項目中會遇到按鈕重復點擊后引起表單的重復點擊問題。所以針對這個問題，自己嘗試了幾種辦法分別去解決。直接上代碼。

1.粗暴簡單辦法

直接定義一個變量，每次點擊過后等所有操作結束后釋放變量。或使用loading防止用戶點擊

//* 部分代碼<script>export default {  methods: {    onSubmit() {      if (this.lock) return;      this.lock = true;      // const load = this.$loading();      this.$http.create().then((res) => {        // do something        this.lock = false;        // load.close();      }).catch(() => {        this.lock = false;        // load.close();      })    },   },}</script>

這種辦法簡單粗暴，但是每次需要防止重復點擊的地方,都要去關注lock或者loading的重置，總覺的很啰嗦。也沒辦法好好的抽離出來。（PS:能力有限，自己也沒有想到比較好的辦法在上層優雅的封裝出來）

2.直接把loading放到http請求中去做，統一封裝方法

//* 部分代碼...let load;http.interceptors.request.use((config) => {  load = Loading();  ...  return config;}, error => {  load.close();  return Promise.reject(error)});http.interceptors.response.use((response) => {  load.close();  ...  return response; },error => {  load.close();  return Promise.reject(error);});

這種辦法在實際中也用過了一段時間，一開始挺好用的，但是在后面自己弱網測試的時候發現也是會導致重復點擊的情況。而且在有些時候loading圖并不是所有請求都需要，還要去做個是否顯示loading的配置，這樣感覺http請求又笨重了，也沒有讓重復點擊功能抽離出來。

3.裝飾器方法

說到裝飾器，最經典的應用場景就是面向切片編程（AOP），《前端常用設計模式(1)--裝飾器(decorator)》juejin.im/post/5cb415… 做出了很棒的理解與應用。得益于ES7和TS，裝飾器在Angular和react中都有很多案例，因為Vue中Class不是必選，所以在Vue中很少看到使用裝飾器的，得益于官方有vue-class-component來使用Class進行創建組件的方法，開始了自己的嘗試之路。

lock.js

export function lock(target, key, desc) {  const fn = desc.value;  //* 沒有使用箭頭函數是為了讓this能指回到vue，這樣就可以獲取到vue的data，從而做更多的事情，下面會講到  desc.value = async function() {    if (this.$lock) return;    this.$lock = true;    await fn.apply(this).catch(() => {      this.$lock = false;    });    this.$lock = false;    return target;  };}