flash 消息有时不会在 vue2.js 中消失答案

【问题标题】：flash message sometimes does not disappear in vue2.jsflash 消息有时不会在 vue2.js 中消失
【发布时间】：2017-01-12 12:48:43
【问题描述】：

我刚刚做了一个flash message组件，它从eventBus接收flash message，然后显示flash message 3秒后消失。组件如下：

<template>
  <transition name="fade">
    <div v-if="visible" v-bind:class="type" role="alert">{{ message }}</div>
  </transition>
</template>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>

<script>
  import EventBus from '../../config/EventBus';

  export default {
    name: 'flash-view',
    data() {
      return {
        type: '',
        message: '',
        visible: false,
      };
    },
    mounted() {
      EventBus.subscribeFlashMessage(data => this.setData(data));
      setTimeout(() => (
        this.visible = false
      ), 3000);
    },
    methods: {
      setData(data) {
        this.setType(data.type);
        this.message = data.message;
        this.visible = true;
      },
      setType(type) {
        this.type = `alert alert-${type}`;
      },
    },
  };
</script>

该组件非常适合第一条 flash 消息，但是如果随后触发 flash 消息或者如果我更改路由 (VueRouter)，则 flash 消息不会消失。我认为这是因为重新触发了 javascript，这会使 setTimeout 的效果无效，但是我不知道如何在 Vue 中解决这个问题。

【问题讨论】：

这里的问题我没有完全理解，但是你为什么要在mounted() hook 中等待 3 秒然后触发更改？还可以考虑使用v-show 指令来检查可见状态，而不是v-if
我等了三秒钟，然后才使消息不可见。再三考虑，mounted() 可能不是定义这个的合适位置。
我认为这会让你有问题，你应该在触发此警报的方法中使用 setTimeout 而不是 mounted() hook. VueJS 中的钩子在这里解释 vuejs.org/v2/guide/instance.html#Lifecycle-Diagram
谢谢你，成功了！ :D

标签： vue.js vuejs2

【解决方案1】：

感谢 Belmin Bedak 的帮助，我已经设法修复了这个错误。现在使用 created() 而不是 mount() 来实现以下内容，因为每个更新周期都会重新触发 mount。 Created() 设置监听器一次，watch 用于检查可见是否已更改（当有新事件被推送到监听器时会发生这种情况）。如果可见改变，setTimeout 会被正确触发。

<template>
  <transition name="fade">
    <div
      v-if="visible"
      v-bind:class="type"
      role="alert"
      v-text="message"
    >
    </div>
  </transition>
</template>

<style scoped>
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to {
    opacity: 0
  }
</style>

<script>
  export default {
    name: 'flash-view',
    data() {
      return {
        type: '',
        message: '',
        visible: false,
      };
    },
    created() {
      this.$on('flashMessage', data => this.setData(data));
    },
    methods: {
      setData(data) {
        this.type = `alert alert-${data.type}`;
        this.message = data.message;
        this.visible = true;
      },
      setFadeOut() {
        setTimeout(() => (
          this.visible = false
        ), 2500);
      },
    },
    watch: {
      visible: 'setFadeOut',
    },
  };
</script>

【讨论】：