vue中destroyed方法的使用说明

当一个组件（component）被销毁时，Vue 会自动调用该组件的生命周期钩子函数 destroyed。destroyed 生命周期是在组件的程序和网络活动结束后被调用的，并且在其它生命周期钩子函数后执行。这意味着 Vue 实例及其数据观察者已被解绑定，所有的事件监听器和子组件已被移除，所有的计时器和异步任务已被清理。下面就详细讲解 destroyed 方法的使用说明。

使用说明

destroyed 在组件销毁前的最后一个钩子函数。你可以在这里进行最后的清理工作，比如清除计时器、解绑自定义事件等。

<template>
  <div>
    <!--Some Code-->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data () {
      return {
        timerID: null
      }
    },
    mounted () {
      this.timerID = setInterval(this.someFunction, 1000)
    },
    methods: {
      someFunction () {
        console.log("Hello world!")
      }
    },
    destroyed () {
      clearInterval(this.timerID)
    }
  }
</script>

在上面的示例中，我们在 mounted 生命周期中初始化了一个计时器 timerID，并且在 destroyed 生命周期中清除了计时器。这样做可以确保在组件被销毁时，计时器不会继续执行超出 Vue 组件作用域的代码。

示例1：解绑自定义事件

有时你需要在组件销毁时解绑自定义事件，以免内存泄漏。这时你可以在组件的 destroyed 钩子函数中解绑事件：

<template>
  <div>
    <!--Some Code-->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    mounted () {
      document.addEventListener('click', this.someFunction)
    },
    methods: {
      someFunction () {
        console.log('Hello world!')
      }
    },
    destroyed () {
      document.removeEventListener('click', this.someFunction)
    }
  }
</script>

在上面的示例中，我们在 mounted 生命周期中绑定了一个 click 事件，当组件被销毁时，我们在 destroyed 生命周期中执行解绑操作。这样做可以确保在组件销毁时，该事件监听器不会再继续执行。

示例2：清除异步任务

有时你需要在组件销毁时清除异步任务，以免内存泄漏。这时你可以在组件的 destroyed 钩子函数中清除异步任务：

<template>
  <div>
    <!--Some Code-->
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data () {
      return {
        asyncTask: null
      }
    },
    mounted () {
      this.asyncTask = this.loadData()
    },
    methods: {
      loadData () {
        return new Promise(resolve => {
          setTimeout(() => {
            resolve(['Some data'])
          }, 1000)
        })
      }
    },
    destroyed () {
      this.asyncTask = null
    }
  }
</script>

在上面的示例中，我们在 mounted 生命周期中执行了一个异步任务 loadData，当组件被销毁时，我们在 destroyed 生命周期中清除了它，以确保在组件销毁时异步任务不会再继续执行。