vue3 使用MutationObserver 观察dom子节点数量的变化

Vue 3 中，MutationObserver 可以帮助我们观察 DOM 中的属性变化，包括添加、删除或修改子节点。当你需要在 Vue 组件中监听子节点数量的变化以便动态响应数据更新时，可以这样做：

1. 首先，在组件的 `setup` 或者生命周期钩子里创建一个 MutationObserver 实例，因为它需要在特定的时间点开始观察。

import { onMounted } from 'vue';

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if (mutation.type === 'childList') {
      // mutation.addedNodes 或 mutation.removedNodes 包含了变动后的子节点列表
      const addedNodes = mutation.addedNodes;
      const removedNodes = mutation.removedNodes;

      if (addedNodes.length > 0) {
        console.log('子节点增加', addedNodes);
        // 这里可以根据增加的节点处理相应业务逻辑
      }
      if (removedNodes.length > 0) {
        console.log('子节点减少', removedNodes);
        // 处理子节点减少的情况
      }
    }
  });
});

2. 然后，在 `onMounted` 或其他合适的时机开始观察DOM：

onMounted(() => {
  observer.observe(document.querySelector('.parent-node'), { attributes: false, childList: true, subtree: true }); // 调整 '.parent-node' 替换为你实际需要监控的父元素选择器
});

3. 当不再需要观察时，记得关闭 Observer，例如在组件卸载前：

onUnmounted(() => {
  observer.disconnect();
});