Vue 中 Watch/observe 个 DOM children

Question

给定一个具有 slot 用法的典型 Vue 组件：

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

是否有任何可能的方法来实现一个 observer/watcher 来跟踪 slot 中 DOM children 的数量？我需要知道组件内的 child 是否为 added/removed。

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 中 Watch/observe 个 DOM children

Watch/observe number of DOM children in Vue

observable

vue.js