vue3 如何监听div的子元素数量？

Question

<div class="teleport_anchor" ref="tpEl"></div>

<Teleport to=".teleport_anchor"/>

let tpEl = ref(null);
onMounted(() => {
    watch(
        () => tpEl.value.childNodes.length,
        (len) => {
            console.log(len);
        }
    );
});

上面的代码没用

需求:

当.teleport_anchor无内容时隐藏(Teleport要求必须有.teleport_anchor节点，不能用v-if)

.teleport_anchor有一些样式，比如阴影，但没有内容时很突兀，请问怎样监听子元素的变化呢？

ps.我知道可以用一个变量来实现，但有好几个地方都填充到这里，改起来很麻烦

Answer 1

可以用 MutationObserver 来实现，它的作用就是监听对 DOM 树的修改，而且它是浏览器的内置的 API。这里有一段我以前写的代码可以参考，但是它是用来监听 data-theme 属性变化的，且每当发生变化就把 data-color-mode 设为同样的值：

new MutationObserver((mutations, observe) => {
  document.documentElement.setAttribute(
    "data-color-mode",
    document.documentElement.dataset.theme
  );
}).observe(document.documentElement, {
  attributes: true,
  attributeFilter: ["data-theme"],
});

PS. 我第一眼看见这个问题是想用 CSS 来解决的，搜了一下，还真有这样的功能 :empty，但他的条件比较苛刻，只能看一看。