时间戳

首页 > 解决方案 > 在 Vue 中观察/观察 DOM 子节点的数量

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

问题描述

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

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

是否有任何可能的方法来实现一个观察者/观察者来跟踪内部 DOM 子项的数量slot？我需要知道何时在组件内添加/删除子项。

标签： vue.jsobservable

解决方案

所以我发现对我的问题有用的是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-chang-dom-element-in-vue-3jpd

推荐阅读