胡子中的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>