vue3销毁生命周期的使用

在Vue 3中，销毁生命周期钩子被移除了。取而代之的是使用`beforeUnmount`和`unmounted`两个新的生命周期钩子来处理组件销毁相关的逻辑。

`beforeUnmount`钩子函数在组件即将销毁之前被调用，可以用来执行一些清理工作，例如取消订阅、清除定时器等。你可以在组件的选项对象中定义该钩子函数，就像定义其他生命周期钩子一样。

export default {
  beforeUnmount() {
    // 在组件销毁之前执行清理工作
    // 取消订阅、清除定时器等
  },
};

`unmounted`钩子函数在组件已经销毁之后被调用，此时组件的所有属性和方法都不可访问。你可以在父组件中使用`v-if`或者`v-show`条件指令来控制组件的生命周期。

<template>
  <div>
    <child-component v-if="showChildComponent"></child-component>
    <button @click="destroyChildComponent">销毁子组件</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      showChildComponent: true,
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    destroyChildComponent() {
      this.showChildComponent = false;
    },
  },
};
</script>

这样，当点击"销毁子组件"按钮时，`unmounted`钩子函数会被调用，执行相关的清理工作。