Vue v-console.logへの出力

Question

次の例では、リストをHTML形式で出力します。 HTMLでの出力は正常です。しかし、console.logの同じリストの出力は複製されます。どうして？私は答えを見つけることができませんでしたが、私は次のように気づい：

1. あなたがHTMLで出力productsCount変数をしない場合は、console.logで重複が発生しません。
2. mountedフックをcreatedに変更すると、console.logの複製も発生しません。

誰でもこの動作を説明できると感謝します。
ヴューの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() DOMは、DOMを実装しながらcell()メソッドがすでに呼び出されている意味し、搭載された後、フックが呼び出されます。

マウントされたフックで、cell()メソッドを再度呼び出す再レンダリングの呼び出しを引き起こすデータプロパティを更新しています。あなたのログが2回表示される理由です。