Vue v-console.log로 출력합니다.

Question

다음 예는 HTML로 목록을 인쇄합니다. HTML 출력은 정상입니다. 그러나 console.log에 같은 목록의 결과가 복제됩니다. 왜? 나는 대답을 찾을 수 없습니다,하지만 난 다음 발견 : 당신은 출력하지 HTML에서 productsCount 변수를 할 경우

1. 는 다음 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() 메서드를 호출하는 다시 렌더링 inturn을 발생시키는 데이터 속성을 업데이트하고 있습니다. 그것이 당신의 로그가 2 번 나타나는 것을 보는 이유입니다.