Question

给出使用slot的典型Vue组件：

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "VueComponent"
}
</script>

有没有什么方法可以实现观察者/观察者来跟踪slot中DOM子代的数量？我需要知道何时在组件中添加/删除孩子。

Answer 1

所以对我的问题有用的是MutationObserver。在挂载组件后，我们需要在组件上附加观察者，添加回调处理程序，并在组件被销毁之前断开观察者的连接（在Vue3中已卸载）。

这是用Vue 2.6编写的可行示例

<template>
  <div ref="container">
    <slot></slot>
  </div>
</template>
<script>
export default {
  name: "VueComponent",
  data() {
    return {
      observer: null
    }
  },
  mounted() {
    this.initObserver()
  },
  beforeDestroy() {
    if (this.observer) this.observer.disconnect()
  },
  methods() {
    handleChildrenChanged() {

    },
    initObserver() {
      config = {
        subtree: false,
        childList: true,
        // it's better if you can detect children change by id
        // this can reduce number of updates
        // attributes: true,
        // attributeList: [ 'id' ] 
      }
      const self = this
      const callback = () => {
        self.$nextTick(() => {
          self.handleChildrenChanged()
        })
      }
      const observer = new MutationObserver(callback)
      observer.observe(this.$refs.container, config)
      this.observer = observer
    }
  }
}
</script>

您可以在此处找到Vue中MutationObserver的另一种用法：https://dev.to/sammm/using-mutationobserver-and-resizeobserver-to-measure-a-changing-dom-element-in-vue-3jpd

观察/观察Vue中的DOM子代数

1 个答案: