vue3 beforeDestroy()
时间: 2023-10-19 07:12:09 浏览: 86
The `beforeDestroy()` lifecycle hook in Vue 3 is called right before a component is destroyed. It is mainly used to clean up any resources that the component has used during its lifetime, such as event listeners, timers, or other objects that need to be released.
In Vue 3, the `beforeDestroy()` hook is replaced by the `beforeUnmount()` hook, which is called before a component instance is unmounted and destroyed. The new hook has the same purpose as the old one, to provide an opportunity for the component to clean up any resources it has used.
Here's an example of using the `beforeUnmount()` hook to clean up an event listener:
```
<template>
<button @click="startTimer">Start Timer</button>
</template>
<script>
export default {
data() {
return {
timerId: null
}
},
methods: {
startTimer() {
this.timerId = setInterval(() => {
console.log('tick')
}, 1000)
}
},
beforeUnmount() {
clearInterval(this.timerId)
}
}
</script>
```
In this example, the component sets up an interval timer when the user clicks on the button. When the component is about to be unmounted and destroyed, the `beforeUnmount()` hook is called, which clears the interval timer to prevent it from continuing to run after the component is gone.