Vue v-for - не понятная ситуация с выводом в console.log

184

10 ноября 2017, 11:02

В примере ниже осуществляется вывод списка в 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>