快捷導(dǎo)航

Vue中$once的兩個(gè)實(shí)用小技巧分享

更新時(shí)間：2022年04月27日 09:41:30 作者：江小皮

$once是一個(gè)函數(shù),可以為Vue組件實(shí)例綁定一個(gè)自定義事件,但該事件只能被觸發(fā)一次,觸發(fā)之后隨即被移除,下面這篇文章主要給大家介紹了關(guān)于Vue中$once的兩個(gè)實(shí)用小技巧,需要的朋友可以參考下

前言

在 Vue 中有很多 API 都有很實(shí)用的地方，只是需要挖掘適用的場(chǎng)景，這里整理出了 $once 的兩個(gè)小技巧，也是在平常工作中用的比較多的，分享給大家，希望對(duì)大家能有幫助。

清除定時(shí)器

定時(shí)器大家用的應(yīng)該也不少，像我一開始一般都是這樣寫的，在 created 中創(chuàng)建定時(shí)器，在 beforeDestroy 中銷毀定時(shí)器。

<script>
export default {
  name: "Timer",
  data() {
    return {
      timer: null,
      count: 0,
    };
  },
  created() {
    this.timer = setInterval(() => {
      this.count++;
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

開始的時(shí)候也沒有發(fā)現(xiàn)有什么問題，沒啥毛病。

后面慢慢的了解了更多，才發(fā)現(xiàn)里面確實(shí)是有幾個(gè)問題存在的：

定時(shí)器的創(chuàng)建和銷毀放在了兩個(gè)生命周期中，很容易就忘記在 beforeDestroy 中去銷毀，從而導(dǎo)致內(nèi)存的不必要消耗，并且可讀性太差了，后續(xù)維護(hù)變困難；
如果定時(shí)器的創(chuàng)建和銷毀在同一個(gè)生命周期中的話，那么 timer 其實(shí)也就沒必要使用響應(yīng)式了，可以減少性能的浪費(fèi)，直接在 created 中定義一個(gè)變量即可；
在要銷毀的時(shí)候，只是清空了定時(shí)器，但是卻沒有把 timer 重置為 null，用完重置是個(gè)好習(xí)慣（定時(shí)器返回的值可以理解為這個(gè)定時(shí)器的 ID，通過這個(gè) ID 來(lái)銷毀這個(gè)定時(shí)器）。

優(yōu)化后的版本是這樣的，可讀性好了很多，有點(diǎn) composition API 那味兒了：）,示例可以戳這里

export default {
  name: "OnceTimer",
  data() {
    return {
      count: 0,
    };
  },
  created() {
    let timer = setInterval(() => {
      this.count++;
    }, 1000);
    this.$once("hook:beforeDestroy", () => {
      clearInterval(timer);
      timer = null;
    });
  },
};

$once/$emit + async/await 實(shí)現(xiàn) Dialog 同步執(zhí)行

需求背景是這樣的：在全局有一個(gè)配置項(xiàng)showDialog，在點(diǎn)擊查詢的時(shí)候，如果這個(gè)配置項(xiàng)為 true，則需要 dialog 彈框讓用戶填寫一些數(shù)據(jù)，當(dāng)這個(gè) dialog 彈框關(guān)閉之后，才能發(fā)出 confirm 的接口給后端，配置項(xiàng)為 false 時(shí)，則直接發(fā)送 confirm 的請(qǐng)求。

這里會(huì)有兩個(gè)問題：

這個(gè)彈框和 confirm 這個(gè)操作并不是強(qiáng)相關(guān)，我不能把 confirm 的請(qǐng)求邏輯放置在 dialog 彈框里；
當(dāng)控制彈框顯示的變量 visible 設(shè)為 true 時(shí)，js 邏輯會(huì)繼續(xù)往下執(zhí)行，即把 confirm 的請(qǐng)求邏輯執(zhí)行完了，請(qǐng)求就發(fā)送出去了，這不是我想要的結(jié)果。

我們來(lái)模擬一下這個(gè)過程，如下圖所示：

在點(diǎn)擊查詢之后，先輸出了 form submit（用來(lái)模擬點(diǎn)擊查詢后的發(fā)出請(qǐng)求），然后在點(diǎn)擊 dialog 彈框的確定之后，才輸出了 dialog confirm?？梢钥吹近c(diǎn)擊查詢的接口先發(fā)出，點(diǎn)擊 dialog 彈框確認(rèn)的接口后發(fā)出。

解決這個(gè)問題可以從以下兩個(gè)方面入手：

dialog 的確認(rèn)邏輯與 confirm 發(fā)送請(qǐng)求的邏輯要解耦，不能寫在一起，不利于復(fù)用
confirm 的發(fā)送請(qǐng)求邏輯，要等 dialog 關(guān)閉之后，才能執(zhí)行，那我們就需要知道 dialog 彈框是什么時(shí)候關(guān)閉的。

有了這兩點(diǎn)之后，就可以想到可以利用 $once/$emit + promise + async/ await 來(lái)實(shí)現(xiàn)這一邏輯。

通過 $once/$emit 來(lái)進(jìn)行通信，告知 dialog 關(guān)閉，通過 promise + async/ await 來(lái)使邏輯從異步變同步

我們來(lái)看下具體的代碼：

// dialog 組件
<template>
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    width="30%"
    :before-close="close"
  >
    <span>這是一段信息</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="confirm">確 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ["dialogVisible"],
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("before-dialog-close");
      this.$emit("update:dialogVisible", false);
    },
    confirm() {
      console.log("dialog confirm");
      this.close();
    },
  },
};
</script>

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="審批人">
        <el-input v-model="formInline.user" placeholder="審批人"></el-input>
      </el-form-item>
      <el-form-item label="活動(dòng)區(qū)域">
        <el-select v-model="formInline.region" placeholder="活動(dòng)區(qū)域">
          <el-option label="區(qū)域一" value="shanghai"></el-option>
          <el-option label="區(qū)域二" value="beijing"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查詢</el-button>
      </el-form-item>
    </el-form>
    <Dialog
      :dialogVisible.sync="visible"
      @before-dialog-close="() => this.$emit('beforeDialogClose')"
    />
  </div>
</template>
<script>
import Dialog from "./dialog";
export default {
  name: "Promise",
  components: {
    Dialog,
  },
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      // 控制 dialog 的展示
      visible: false,
      // 在業(yè)務(wù)中這是一個(gè)配置項(xiàng)
      showDialog: true,
    };
  },
  methods: {
    awaitDialogClose() {
      return new Promise((resolve) => {
        if (!this.visible) {
          resolve(null);
        }
        this.$once("beforeDialogClose", () => {
          resolve(null);
        });
      });
    },
    async onSubmit() {
      if (this.showDialog) {
        this.visible = true;
      }
      await this.awaitDialogClose();
      setTimeout(() => {
        console.log("form submit!");
      }, 1000);
    },
  },
};
</script>

效果如下：

在點(diǎn)擊查詢之后，我刻意的停留的一下，就是為了顯示點(diǎn)擊dialog確認(rèn)的邏輯在點(diǎn)擊查詢的請(qǐng)發(fā)邏輯之前執(zhí)行。

詳細(xì)代碼具體分析，可以看到主要的邏輯就是在 dialog 關(guān)閉之前，$emit 出一個(gè)事件，來(lái)告訴父組件，dialog 要關(guān)閉了。

// dialog 組件
close() {
  // 通知父組件dialog要關(guān)閉了
  this.$emit("before-dialog-close");
  // 關(guān)閉 dialog
  this.$emit("update:dialogVisible", false);
},

在父組件中，創(chuàng)建一個(gè) promise，通過 $once 來(lái)等到 dialog 關(guān)閉的信號(hào) 。

// 發(fā)出信號(hào)
<Dialog
  :dialogVisible.sync="visible"
  @before-dialog-close="() => this.$emit('beforeDialogClose')"
/>
// 接收信號(hào)
awaitDialogClose() {
  return new Promise((resolve) => {
    // 當(dāng) dialog 沒彈框的時(shí)候，走這個(gè)邏輯，promise 直接結(jié)束
    if (!this.visible) {
      resolve(null);
    }
    // 當(dāng) dialog 要關(guān)閉的時(shí)候，$once 接收到了信號(hào)，promise 結(jié)束
    this.$once("beforeDialogClose", () => {
      resolve(null);
    });
  });
},

在 confirm 的點(diǎn)擊邏輯中，用一個(gè) await 來(lái)保證 promsie 結(jié)束后，才往下繼續(xù)執(zhí)行。

async onSubmit() {
  // 當(dāng)配置為 true 時(shí)，需要 dialog 彈框
  if (this.showDialog) {
    this.visible = true;
  }
  // promise 結(jié)束后，才會(huì)繼續(xù)往下執(zhí)行，否則就一直等待
  await this.awaitDialogClose();
  setTimeout(() => {
    console.log("form submit!");
  }, 1000);
},

至此，功能就完成了，這個(gè)功能適用場(chǎng)景還是很廣的（我也是請(qǐng)教了大佬才學(xué)會(huì)的），大家有興趣的也可以挖掘一些其他的使用場(chǎng)景。具體代碼在這里，有興趣的可以看一看呀。

可是在 Vue3 中，$once 被移除了，不過沒關(guān)系，Vue 官方也提出了可以替代的方法。

事件總線模式可以被替換為使用外部的、實(shí)現(xiàn)了事件觸發(fā)器接口的庫(kù)，例如 mitt 或 tiny-emitter。

import emitter from 'tiny-emitter/instance'

export default {
  $once: (...args) =&gt; emitter.once(...args),
  $emit: (...args) =&gt; emitter.emit(...args),
}
復(fù)制代碼