⬅️ Back to Table of Contents

📄 useMutationObserver

📊 Analysis Summary

Metric	Count
🔧 Functions	4
📦 Imports	12
🟢 Vue Composition API	2
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useMutationObserver/index.ts

📦 Imports

Name	Source
ConfigurableWindow	../_configurable
Supportable	../types
MaybeComputedElementRefOrArray	../unrefElement
notNullish	@vueuse/shared
toArray	@vueuse/shared
tryOnScopeDispose	@vueuse/shared
computed	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useSupported	../useSupported

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
watch	watch	none	none

---

Functions

useMutationObserver(target: MaybeComputedElementRefOrArray, callback: MutationCallback, options: UseMutationObserverOptions): UseMutationObserverReturn

Watch for changes being made to the DOM tree.

Parameters:

• target any: No description
• callback any: No description
• options any: No description

See: https://vueuse.org/useMutationObserver, https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN

Raw JSDoc

/**
 * 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
 */

Calls:

• useSupported (from ../useSupported)
• observer.disconnect
• computed (from vue)
• toValue (from vue)
• toArray(value) .map(unrefElement) .filter
• watch (from vue)
• cleanup
• newTargets.forEach
• observer!.observe
• observer?.takeRecords
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)

Code

export function useMutationObserver(
  target: MaybeComputedElementRefOrArray,
  callback: MutationCallback,
  options: UseMutationObserverOptions = {},
): UseMutationObserverReturn {
  const { window = defaultWindow, ...mutationOptions } = options
  let observer: MutationObserver | undefined
  const isSupported = useSupported(() => window && 'MutationObserver' in window)

  const cleanup = () => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

  const targets = computed(() => {
    const value = toValue(target)
    const items = toArray(value)
      .map(unrefElement)
      .filter(notNullish)
    return new Set(items)
  })

  const stopWatch = watch(
    targets,
    (newTargets) => {
      cleanup()

      if (isSupported.value && newTargets.size) {
        observer = new MutationObserver(callback)
        newTargets.forEach(el => observer!.observe(el, mutationOptions))
      }
    },
    { immediate: true, flush: 'post' },
  )

  const takeRecords = () => {
    return observer?.takeRecords()
  }

  const stop = () => {
    stopWatch()
    cleanup()
  }

  tryOnScopeDispose(stop)

  return {
    isSupported,
    stop,
    takeRecords,
  }
}

Internal helpers

Declared inside another function in this file.

cleanup(): void

Returns: void

Calls:

• observer.disconnect

Code

() => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

takeRecords(): MutationRecord[]

Returns: MutationRecord[]

Calls:

• observer?.takeRecords

Code

() => {
    return observer?.takeRecords()
  }

stop(): void

Returns: void

Calls:

• stopWatch
• cleanup

Code

() => {
    stopWatch()
    cleanup()
  }

---

Interfaces

UseMutationObserverOptions

Interface Code

export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}

UseMutationObserverReturn

Interface Code

export interface UseMutationObserverReturn extends Supportable {
  stop: () => void
  takeRecords: () => MutationRecord[] | undefined
}

Properties

Name	Type	Optional	Description
stop	() => void	✗	not shown
takeRecords	() => MutationRecord[] \| undefined	✗	not shown

---

Generated by Syntax Scribe