useMutationObserver

类别

Elements

导出体积

558 B

上次更改

last month

监视对 DOM 树的变更。MutationObserver MDN

示例

源码 playground (beta)

用法

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>

类型声明

export interface UseMutationObserverOptions
  extends MutationObserverInit,
    ConfigurableWindow {}
/**
 * 监视对 DOM 树的变更
 *
 * @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
>