javascript - 如何判断 Vue 组件是否已卸载以防止异步函数访问已卸载组件的数据？

Question

请参阅这个最小示例

import Vue from 'vue';

Vue.extend({
  data() {
    return {
      name: 'James',
    };
  },
  methods: {
    greet() {
      setTimeout(() => {
        const componentIsUnmounted = ???; // How do I tell if component is unmounted?

        if (!componentIsUnmounted) {
          console.log(this.name);
        }
      }, 300);
    },
  },
});

正如你所看到的，我有一个带有异步函数的组件，当你调用它时，它会在300ms后触发，到那时，Vue组件可能会被卸载。

我想我可以通过 Lodash 的 uniqueID() 在全局中存储一个标志来做到这一点函数在 mounted() 和 beforeDestroyed() 创建唯一 ID。

还有其他更简单的方法吗？

Answer 1

这是我刚刚使用的，效果很好。

创建超时时，将 ID 存储在 this 上。然后在 beforeDestroy 上，使用 ID 调用 clearTimeout。即使您事先手动取消超时，clearTimeout也不会失败。

<script>
  export default {
    created() {
      this.timeoutId = setTimeout(() => {}, 1000)
    },

    beforeDestroy() {
      clearTimeout(this.timeoutId)
    }
  }
</script>

无需在 data 属性中设置它，因为它不是响应式的。