vue.js - 在 Vue 中观察/观察 DOM 子级的数量

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