Skip to content

useMutationObserver

Category
Export Size
558 B
Last Changed
4 weeks ago

Watch for changes being made to the DOM tree. MutationObserver MDN

Demo

Mutation Attribute: class
Mutation Attribute: style

Usage

vue
<script setup lang="ts">
import { 
useMutationObserver
} from '@vueuse/core'
import {
ref
,
useTemplateRef
} from 'vue'
const
el
=
useTemplateRef
('el')
const
messages
=
ref
([])
useMutationObserver
(
el
, (
mutations
) => {
if (
mutations
[0])
messages
.
value
.
push
(
mutations
[0].
attributeName
)
}, {
attributes
: true,
}) </script> <template> <
div
ref
="
el
">
Hello VueUse </
div
>
</template>

Type Declarations

ts
export interface UseMutationObserverOptions
  extends MutationObserverInit,
    ConfigurableWindow {}
/**
 * Watch for changes being made to the DOM tree.
 *
 * @see https://vueuse.org/useMutationObserver
 * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
 * @param target
 * @param callback
 * @param options
 */
export declare function 
useMutationObserver
(
target
:
|
MaybeComputedElementRef
|
MaybeComputedElementRef
[]
|
MaybeRefOrGetter
<
MaybeElement
[]>,
callback
: MutationCallback,
options
?: UseMutationObserverOptions,
): {
isSupported
:
ComputedRef
<boolean>
stop
: () => void
takeRecords
: () => MutationRecord[] | undefined
} export type
UseMutationObserverReturn
=
ReturnType
<typeof
useMutationObserver
>

Source

SourceDemoDocs

Contributors

Anthony Fu
IlyaL
Anthony Fu
丶远方
Jelf
Issayah
青椒肉丝
我想静静
OrbisK
Pim
jdm1219
chirokas
huodoushigemi
AaronBeaudoin
laozei
karma
Shinigami
Alex Kozack
Antério Vieira
zhong666

Changelog

v12.8.0 on
7432f - feat(types): deprecate MaybeRef and MaybeRefOrGetter in favor of Vue's native (#4636)
v12.3.0 on
021d0 - feat(toArray): new utility function (#4432)
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.0.0-beta.1 on
489a9 - fix: stop watching before cleaning up (#4037)
v10.8.0 on
98fac - feat: allow multiple targets (#3741)
v10.6.0 on
f9136 - feat: add takeRecords function (#3480)
v10.5.0 on
8167b - feat: use MaybeComputedElementRef (#3430)

Released under the MIT License.

Join the Biggest FREE AI-Driven Development Event for Vue Developers
Save My Seat