Skip to content

onElementRemoval

当元素或任何包含它的元素被删除时触发。

¥Fires when the element or any element containing it is removed.

示例

demo1: recreate new element

removed times: 0

demo2: reuse same element

target element
removed times: 0

用法

¥Usage

vue
<script setup lang="ts">
import { 
onElementRemoval
} from '@vueuse/core'
import {
shallowRef
,
useTemplateRef
} from 'vue'
const
btnRef
=
useTemplateRef
<HTMLElement>('btn')
const
btnState
=
shallowRef
(true)
const
removedCount
=
shallowRef
(0)
function
btnOnClick
() {
btnState
.
value
= !
btnState
.
value
}
onElementRemoval
(
btnRef
, () => ++
removedCount
.
value
)
</script> <template> <
button
v-if="
btnState
"
@
click
="
btnOnClick
"
> recreate me </
button
>
<
button
v-else
ref
="
btnRef
"
@
click
="
btnOnClick
"
> remove me </
button
>
<
b
>removed times: {{
removedCount
}}</
b
>
</template>