您可能在组件渲染函数中有无限更新循环？答案

【问题标题】：You may have an infinite update loop in a component render function?您可能在组件渲染函数中有无限更新循环？
【发布时间】：2019-02-07 18:35:56
【问题描述】：

我是Vue.js 的新手。我的函数不是将变量增加到 1，而是将其增加到任何随机数。控制台显示此错误：

“您可能在组件渲染函数中有无限更新循环”`。

有什么问题？

<template lang="pug">
  #homepage
    .workArea
      button(
          v-on:click='clicker'
          ) 
            |click me
      p      
        |{{clicker()}}

</template>
<script>
export default {
  name: "test",
  data: () => ({
    a: 0,
  }),
  methods: {
    clicker() {
      return this.a++
    },
  },
}
</script>

【问题讨论】：

不要使用{{clicker()}} 打印值。使用{{a}}。

标签： javascript vue.js

【解决方案1】：

除了关于输出值的部分之外，您的代码还可以。您应该使用 {{a}} 来显示数据。

<template lang="pug">

#homepage
    .workArea
      button(
          v-on:click='clicker'
          ) 
            |click me
      p      
        |{{a}}

</template>
<script>
export default {
  name: "test",
  data: () => ({
    a: 0,
  }),
  methods: {
    clicker() {
      return this.a++
    },
  },
}
</script>

【讨论】：

【解决方案2】：

您在单击按钮时调用clicker 方法。

因此，单击按钮会增加a。一旦 a 更新，Vue 实例会尝试重新渲染视图。此时，字符串插值内的方法调用不是简单地打印a 的值，而是再次增加a。这将继续循环。

希望问题很清楚。只需将 {{clicker}} 更改为 {{a}}

【讨论】：