如何获取 DOM 中渲染的 Vue 组件数量？

Question

我正在构建一个带有 firestore 后端的博客应用程序，我在一个组件中显示我从 firestore 带来的评论，该组件为每个评论重复......到目前为止一切顺利。

现在我想知道评论集合中有多少评论，问题是不建议带集合的大小querySnapshot.size因为它读取整个集合，另一种方法是使用分布式计数器，但是它们对于像我这样的菜鸟来说是一个痛苦的屁股......此外，我不打算收到这么多评论来使用计数器。

那么，有没有办法获取DOM中渲染的组件数量呢？ 这样，我就不必计算集合中有多少评论，因为我已经在 DOM 中打印了评论总数。

Answer 1

如前所述，您可以使用 querySnapshot 中的size ，它不会对集合进行额外读取，因为它只是已检索文档的数量。

另一种方法是计算组件已安装和更新的次数，此处显示了如何执行此操作的想法：

<div id="app">
  <div>
    <p>Number of comments {{comments}}</p>
    <comments-component></comments-component>
    <comments-component></comments-component>
    <comments-component></comments-component>
  </div>
  <br>
</div>

Vue.component('comments-component', {
  template: '<p>Comment</p>'
})
new Vue({
  el: '#app',
  data: {
    comments: 0
  },
  methods: {
    updateCommmentCounter() {
      this.comments = this.$children.filter(child => child.constructor.options.name === 'comments-component').length;
    }
  },
  beforeUpdate() {
    this.updateCommmentCounter()
  },
  mounted() {
    this.updateCommmentCounter()
  }
})