vue2与vue3的实例销毁，有什么区别。

本文链接：https://blog.youkuaiyun.com/qq_42264793/article/details/118052571

本文探讨了Vue2和Vue3中实例销毁的不同之处。在Vue2中，使用$destroy()方法进行销毁，触发beforeDestroy和destroyed钩子。而在Vue3中，beforeDestroy变为beforeUnmount，destroyed变为unmounted，同时新增updated和beforeUnmount等生命周期钩子，提供了更精细的控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2的实例销毁:

vm.$destroy()
完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

触发 beforeDestroy 和 destroyed 的钩子。

vue3的实例销毁：

destroyed 生命周期选项被重命名为 unmounted
beforeDestroy 生命周期选项被重命名为 beforeUnmount

updated：在包含组件的 VNode 及其子组件的 VNode 更新后调用。

beforeUnmount：在卸载绑定元素的父组件之前调用

unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

举例：

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})

// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

// 卸载应用实例的根组件。
<body>
  <div id="my-app"></div>
</body>
//。。。。。//。。。。。。//。。。。。。//。。。。。//
import { createApp } from 'vue'

const app = createApp({})
// 做一些必要的准备
app.mount('#my-app')

// 挂载5秒后，应用将被卸载
setTimeout(() => app.unmount(), 5000)