Vue v-for 输出到 console.log

Question

以下示例打印 HTML 中的列表。 HTML中的输出是正常的。但是 console.log 中相同列表的输出是重复的。为什么？我找不到答案，但我注意到以下内容：

如果不输出HTML中的productsCount变量，那么console.log中不会出现重复。
如果用 created 替换 mounted 挂钩，则 console.log 中的重复也不会发生。

如果有人能解释这种行为，我将不胜感激。
Vue v2.4.0

new Vue({
  data: {
    products: [1, 2, 3],
    productsCount: 0
  },
  methods: {
    cell(product) {
      console.log(product);
      return product;
    }
  },
  mounted() {
    this.productsCount = this.products.length;
  }
}).$mount('#products');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="products">
  <h6>productsCount: {{productsCount}}</h6>
  <ul>
    <li v-for="(product, index) in products">
      <span v-html="cell(product)"></span>
    </li>
  </ul>
</div>

Answer 1

mounted() hook 在挂载 DOM 之后被调用，也就是说挂载 DOM.

时已经调用了 cell() 方法

在您挂载的挂钩中，您正在更新数据属性，这会导致重新渲染并再次调用 cell() 方法。这就是您看到日志出现 2 次的原因

Vue v-for 输出到 console.log

Vue v-for output to console.log

javascript

console.log

vue.js