useMutationObserver

A hook that provides the ability to watch for changes being made to the DOM tree, refer to MutationObserver

Examples

Default Usage

current width：200 px

Mutation count 0

Default Usage

复制成功!

<template>
  <div>
    <div
      ref="domRef"
      :style="{
        width: width + 'px',
        padding: '12',
        border: '1px solid #000',
        marginBottom: '8px',
        backgroundColor: 'rgba(188, 189, 190, 0.3)',
      }"
    >
      current width：{{ width }} px
    </div>
    <vhp-button @click="setWidth()">widening</vhp-button>
    <p>Mutation count {{ count }}</p>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { useMutationObserver } from 'vue-hooks-plus'

  const domRef = ref(undefined)
  const width = ref(200)
  const count = ref(0)

  useMutationObserver(
    mutationsList => {
      mutationsList.forEach(() => {
        count.value += 1
      })
    },
    domRef,
    { attributes: true },
  )

  const setWidth = () => {
    width.value += 10
  }
</script>

API

useMutationObserver(
  callback: MutationCallback,
  target: Target,
  options?: MutationObserverInit,
);

Params

Property	Description	Type	Default
target	DOM element or ref	() => Element | Element | MutableRefObject<Element>	-
callback	The callback function	(mutations: MutationRecord[], observer: MutationObserver) => void	-
options	Setting	MutationObserverInit	-

Options

For options, please refer to MutationObserver

Source

Source · Document · Demo