Question

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

如果您未在HTML中输出productsCount变量，则console.log中的重复不会发生。
如果您将mounted挂钩替换为created，则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

在挂载DOM之后调用

mounted()挂钩，这意味着在挂载DOM时已调用cell()方法。

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

Vue v-for output to console.log

1 个答案: