胡子中的Vue模板語法增量

Question

剛開始學習Vue.js時，我很好奇我的簡單代碼中發生了什么，我找不到很好的表現。 我正在嘗試增加小胡子內部的計數器，但是此變量有奇怪的情況發生

我的代碼：

 new Vue({ el: '#app', data: { counter: 5, state: false }, methods: { fun: function() { this.state = !this.state } } }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ counter }}</p> <button v-on:click="fun">Button</button> <p v-if="state"> Miss me? {{ counter++ }} </p> </div> 

我在控制台中收到[Vue warn]: You may have an infinite update loop in a component render function. 當counter++調用時。 我認為我可以在小胡子sytaxt中運行表達式，但在這種情況下它對我不起作用。

有人能解釋一下幕后發生的事情嗎？

Answer 1

您在每個渲染調用上運行counter++ ，即counter = counter + 1 。 更改實例狀態將重新呈現該組件，這將使計數器一次又一次遞增，從而導致無限循環，如Vue會正確警告您。

相反，您應該在點擊處理程序函數中更新counter ：

 new Vue({ el: '#app', data: { counter: 5, state: false }, methods: { fun: function() { this.counter++; this.state = !this.state } } }) 

 <script src="https://unpkg.com/vue"></script> <div id="app"> <p>{{ counter }}</p> <button v-on:click="fun">Button</button> <p v-if="state"> Miss me? {{ counter }} </p> </div>