深入理解Vue unmounted

一、生命周期钩子介绍

Vue是基于组件的编程框架，每个组件都有自己的生命周期。这些生命周期由一系列的钩子函数组成，它们在组件实例化、更新和销毁的过程中被调用。下面是Vue的生命周期图示：

                        beforeCreate
                              ↓
                        created
                              ↓
                         beforeMount
                              ↓
                          mounted
                              ↓
                         beforeUpdate
                              ↓
                          updated
                              ↓
                         beforeDestroy
                              ↓
                           destroyed

二、Vue组件销毁

组件的销毁是指组件实例从DOM中删除，所有绑定的事件监听器和watcher都被销毁。当Vue组件被销毁时会触发一些钩子函数。这些钩子函数包括beforeDestroy和destroyed。

beforeDestroy: function() {
  // 在组件销毁之前执行的代码
}

destroyed: function() {
  // 在组件销毁之后执行的代码
}

三、Vue unmounted事件

除了Vue提供的beforeDestroy和destroyed钩子，Vue 3.0还引入了一个新的事件unmounted。unmounted事件与beforeDestroy和destroyed钩子类似，但是它可以用于非常规的场景，比如在组件从非DOM环境中切换时。例如，在单页应用程序(SPA)中，可以使用Vue Router在不同的路由之间切换。这时，组件会从DOM中被移除，但不会被销毁，因此也不会触发beforeDestroy和destroyed钩子。在这种情况下，可以使用unmounted事件来执行一些清理函数。

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      // 在组件从非DOM环境中切换时执行的代码
    })
  }
}

四、在组件中使用unmounted事件

在使用unmounted事件时，我们可以在组件的setup函数中调用onUnmounted钩子，用于注册unmounted事件。

import { onUnmounted } from 'vue'

export default {
  setup() {
    onUnmounted(() => {
      // 执行清理函数
      document.removeEventListener('keydown', handleKeyDown)
    })

    const handleKeyDown = (event) => {
      // 处理按键事件
    }

    document.addEventListener('keydown', handleKeyDown)

    return {
      // 返回值...
    }
  }
}

五、总结

本文介绍了Vue的生命周期钩子，包括组件的创建、更新和销毁过程中所触发的钩子函数。我们还介绍了Vue 3.0引入的unmounted事件，它可以用于非常规的场景，比如在组件从非DOM环境中切换时。通过onUnmounted函数，我们可以在组件中注册unmounted事件，并在组件销毁时执行一些清理函数。