vue.js - Vue Js 组件不会被销毁？

Question

我目前正在开发一个非常通用的仪表板来显示各种数据。

对于前端，我使用的是最新的 nuxt 和 vue 版本。

我的仪表板有多种显示数据的变体（例如饼图、折线图等），这些变体在动态调用的组件中进行了描述。

问题是当我从页面“/”浏览到另一个页面（例如“/foo”）时，间隔会再次触发并使应用程序崩溃。这发生在生命周期钩子被销毁之后。我试图将间隔定义为一个变量并在 beforeDestroy 钩子中停止它，但它没有帮助。

let interval= setInterval(this.fetchData.bind(null, configuration, connector), configuration.refreshTime)

/* later */
clearInterval(interval);

你看到错误了吗？

谢谢你。

---

那是相关的代码：

模板

<no-ssr>
  <v-container grid-list-md>
    <v-layout row wrap v-masonry transition-duration="0.5s" item-selector=".flex" column-width="#grid-sizer">
      <v-flex xs1 sm1 md1 lg1 x1 id="grid-sizer"></v-flex>
      <component :key="dashboardItem.id" v-for="(dashboardItem,index) in dashboardItems" :is="dashboardItem.type" :connector="dashboardItem.connector"
        :type="dashboardItem.type" :configuration="dashboardItem.configuration" :id="dashboardItem.id" :index="index"></component>
    </v-layout>
  </v-container>
</no-ssr>

脚本

import OnlyValue from '@/components/dashboardItems/OnlyValue.vue'
import TrafficLight from '@/components/dashboardItems/TrafficLight.vue'
import ChartAllHover from '@/components/dashboardItems/ChartAllHover.vue'
import PieChart from '@/components/dashboardItems/PieChart.vue'
import Section from '@/components/dashboardItems/Section.vue'
import Gauge from '@/components/dashboardItems/Gauge.vue'...    
export default {
  name: 'HomePage',

  head () {
    return {
      title: "Dashboard"
    }
  },

  computed: {
    ...mapGetters({
      isAuthenticated: "users/isAuthentificated",
      profileName: "profiles/name",
      dashboardItems: "profiles/dashboardItems"
    })
  },

  mounted() {
    if (typeof this.$redrawVueMasonry === 'function') {
      this.$redrawVueMasonry()
    }
  },

  components: {
    OnlyValue,
    TrafficLight,
    ChartAllHover,
    PieChart,
    Section,
    Gauge
  }
}

调用组件时，它看起来如下：

import dashboardItem from '~/mixins/dashboardItem'

export default {
name: "gauge",

mixins: [dashboardItem],

props: {
    connector: {
      type: String,
      required: true
    },
    type: {
        type: String,
        required: true
    },
    configuration: {
        type: Object,
        required: true
    },
    id: {
        type: Number,
        required: true
    },
    index: {
        type: Number,
        required: true
    }
  },

  data: () => ({
    initOptions: {
        renderer: 'svg'
    },
    options: {
      tooltip: {
        formatter: "{c}%"
      },
      series: [{
        name: null,
        type: 'gauge',
        detail: {
          formatter: '{value}%'
        },
        data: null
      }]
    },
    isLoading: true
  }),

  methods: {
    getData(configuration, connector) {
      this.fetchData(configuration, connector)
      setInterval(this.fetchData.bind(null, configuration, connector), configuration.refreshTime)
    },
    fetchData(configuration, connector) {
      this.getSingleValue(configuration, connector)
        .then(data => {
          this.isLoading = false
          let percent = (data.value / configuration.max) * 100
          percent = Math.round(percent * 10) / 10
          this.$nextTick(function () {
            this.$refs.gauge.mergeOptions({
              series: [{
                name: data.title,
                data: [{
                  value: percent,
                  name: data.title
                }]
              }]
            })
          })
          this.$redrawVueMasonry()
        })
        .catch(e => console.log(e))
    }
  },

  mounted () {
    this.getData(this.configuration, this.connector)
  }
}

标签： vue.jsvuejs2vue-componentnuxt.js