代码驿站移动版

当前位置：主页 > 网页前端 > vue >

Vue中$once的两个实用小技巧分享

时间：2022-08-20 08:09:10 | 栏目：vue | 点击：次

前言

在 Vue 中有很多 API 都有很实用的地方，只是需要挖掘适用的场景，这里整理出了 $once 的两个小技巧，也是在平常工作中用的比较多的，分享给大家，希望对大家能有帮助。

清除定时器

定时器大家用的应该也不少，像我一开始一般都是这样写的，在 created 中创建定时器，在 beforeDestroy 中销毁定时器。

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

开始的时候也没有发现有什么问题，没啥毛病。

后面慢慢的了解了更多，才发现里面确实是有几个问题存在的：

优化后的版本是这样的，可读性好了很多，有点 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 实现 Dialog 同步执行

需求背景是这样的：在全局有一个配置项showDialog，在点击 查询 的时候，如果这个配置项为 true，则需要 dialog 弹框让用户填写一些数据，当这个 dialog 弹框关闭之后，才能发出 confirm 的接口给后端，配置项为 false 时，则直接发送 confirm 的请求。

这里会有两个问题：

我们来模拟一下这个过程，如下图所示：

在点击查询之后，先输出了 form submit（用来模拟点击查询后的发出请求），然后在点击 dialog 弹框的确定之后，才输出了 dialog confirm。可以看到点击查询的接口先发出，点击 dialog 弹框 确认的接口后发出。

解决这个问题可以从以下两个方面入手：

有了这两点之后，就可以想到可以利用 $once/$emit + promise + async/ await 来实现这一逻辑。

通过 $once/$emit 来进行通信，告知 dialog 关闭，通过 promise + async/ await 来使逻辑从异步变同步

我们来看下具体的代码：

// 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="活动区域">
        <el-select v-model="formInline.region" placeholder="活动区域">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" 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,
      // 在业务中这是一个配置项
      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>

效果如下：

在点击查询之后，我刻意的停留的一下，就是为了显示点击dialog确认的逻辑在点击查询的请发逻辑之前执行。

详细代码具体分析，可以看到主要的逻辑就是在 dialog 关闭之前，$emit 出一个事件，来告诉父组件，dialog 要关闭了。

// dialog 组件
close() {
  // 通知父组件dialog要关闭了
  this.$emit("before-dialog-close");
  // 关闭 dialog
  this.$emit("update:dialogVisible", false);
},

在父组件中，创建一个 promise，通过 $once 来等到 dialog 关闭的信号 。

// 发出信号
<Dialog
  :dialogVisible.sync="visible"
  @before-dialog-close="() => this.$emit('beforeDialogClose')"
/>
// 接收信号
awaitDialogClose() {
  return new Promise((resolve) => {
    // 当 dialog 没弹框的时候，走这个逻辑，promise 直接结束
    if (!this.visible) {
      resolve(null);
    }
    // 当 dialog 要关闭的时候，$once 接收到了信号，promise 结束
    this.$once("beforeDialogClose", () => {
      resolve(null);
    });
  });
},

在 confirm 的点击逻辑中，用一个 await 来保证 promsie 结束后，才往下继续执行。

async onSubmit() {
  // 当配置为 true 时，需要 dialog 弹框
  if (this.showDialog) {
    this.visible = true;
  }
  // promise 结束后，才会继续往下执行，否则就一直等待
  await this.awaitDialogClose();
  setTimeout(() => {
    console.log("form submit!");
  }, 1000);
},

至此，功能就完成了，这个功能适用场景还是很广的（我也是请教了大佬才学会的），大家有兴趣的也可以挖掘一些其他的使用场景。具体代码在这里，有兴趣的可以看一看呀。

可是在 Vue3 中，$once 被移除了，不过没关系，Vue 官方也提出了可以替代的方法。

事件总线模式可以被替换为使用外部的、实现了事件触发器接口的库，例如 mitt 或 tiny-emitter。

import emitter from 'tiny-emitter/instance'

export default {
  $once: (...args) =&gt; emitter.once(...args),
  $emit: (...args) =&gt; emitter.emit(...args),
}
复制代码

总结

没有无用的 API，只是没有找到适用的场景。如果大家有更好的解决方法，也可以在评论区告诉我，让我学习学习。

您可能感兴趣的文章:

相关文章