useMutationObserver 是 Vueuse 库提供的一个自定义钩子函数，用于在 Vue 组件中观察 DOM 树的变化。
它基于浏览器原生的 MutationObserver 接口实现。MutationObserver 允许开发者监视 DOM 树的变化，并在变化发生时执行相应的回调函数。
通过使用 useMutationObserver，你可以在 Vue 组件中方便地监听目标元素的变化，无论是元素的子节点的添加、删除、属性变化等等。当目标元素发生变化时，你提供的回调函数将被触发，从而可以执行相应的操作。
用法
import { useMutationObserver } from 'vueuse'
// 在 Vue 组件中使用
export default {
setup() {
const callback = (mutations) => {
// 在这里处理 DOM 变化
}
useMutationObserver(document.body, callback)
return {
// 返回其他数据
}
},
}
源码分析
这段代码定义了 useMutationObserver 函数及其相关类型和接口。
函数的参数如下：
target：要观察的目标元素。可以是一个 DOM 元素的引用（Element），也可以是一个响应式引用（Ref<Element>）。callback：当目标元素或其子节点发生变化时调用的回调函数。回调函数的参数是一个MutationRecord数组，其中包含有关 DOM 变化的信息。options：配置选项对象，用于自定义MutationObserver的行为。它继承了MutationObserverInit和ConfigurableWindow接口，可以指定要观察的变化类型、是否观察子节点变化等。
函数内部首先从 options 中解构出 window 和其他 MutationObserver 的配置选项。然后创建了一个 observer 变量，用于存储 MutationObserver 的实例。
接下来，使用 useSupported Hook 判断浏览器是否支持 MutationObserver。该 Hook 接受一个函数作为参数，该函数返回一个布尔值，表示是否支持。
然后定义了 cleanup 函数，用于断开 observer 的连接并清理资源。
接着使用 watch 函数监视 target 的变化。当 target 发生变化时，会执行回调函数。在回调函数中，先调用 cleanup 清理之前的观察器，然后根据支持情况、window 存在性和 el 存在性创建新的 MutationObserver 实例，并调用 observe 方法开始观察目标元素。
最后，定义了 stop 函数，用于停止观察，并清理之前的观察器和 watch。将 stop 函数注册到组件的销毁钩子中，确保在组件销毁时自动停止观察。
函数返回一个对象，包含两个属性：
isSupported：一个计算属性（ComputedRef<boolean>），表示浏览器是否支持MutationObserver。stop：一个函数，用于停止观察，并清理之前的观察器和watch。
最后，UseMutationObserverReturn 是一个类型别名，表示 useMutationObserver 函数的返回类型。
