添加数字时出错：组件渲染函数中可能存在无限更新循环答案

【问题标题】：error in adding numbers : You may have an infinite update loop in a component render function添加数字时出错：组件渲染函数中可能存在无限更新循环
【发布时间】：2021-05-17 12:33:27
【问题描述】：

我有一个定义为0的数字，还有一个增加数字的增加方法……

但是当我使用这些时，它会说

[Vue 警告]：组件渲染函数中可能存在无限更新循环。

html：

<div id="app">
  {{ increase() }}
  <p>{{ number }}</p>
</div>

js:

var application = new Vue({
  el: "#app",
  data: {
    number: 0,
  },
  methods: {
    increase: function() {
      this.number++
    },
  },
});

【问题讨论】：

您想在点击时调用increase 方法吗？如果是，则将其定义为<div id="app" @click="increase">

标签： vue.js vuejs2

【解决方案1】：

您在组件template 中调用方法increase 导致data 发生更改并由vue 重新渲染以更新不断重复，正确的方法是在事件发生时：

new Vue({
  el: "#app",
  data: {
    number: 0,
  },
  methods: {
    increase: function() {
      this.number++
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="increase">Increase</button>
  <p>{{ number }}</p>
</div>

【讨论】：