Question

我正在尝试加快vue.js的速度，确实遇到了我无法解释的行为。我正在尝试增加并重新渲染简单的输出，如下所示：

<div id="app">
    <h1> Seconds : {{ number }}</h1>
    {{ update() }}
</div>

</body>

<script>
    new Vue({
        el: "#app",
        data: {
            number: 1
        },
        methods: {
            update() {
                setInterval(() => {
                    this.number++
                }, 1000)
            }
        }
    })

</script>

所有工作正常，除了我希望它可以简单地将1 ... 2 ... 3 ... 4 ... 5 ...等数起来，而是将输出翻倍，即显示1 ... 2 ... 4 ... 8 ... 16 ... 32 。 ..等等

如果我替换

，则保持不变。

this.number++

使用

this.number = this.number + 1

我在这里想念的是什么？这是错误还是“怪异”功能？

Answer 1

您正在为组件的每次渲染执行update函数。

并且由于渲染每次都要依赖number进行更改，因此每次重新更改组件时都会重新调用组件，并再次调用update。

setInterval重复调用一个函数或执行一个代码段。 setInterval

如此有效地创建了多个计时器，这些计时器将使number递增。

在template中调用函数也不是一个好习惯，您只能在update生命周期挂钩中调用created方法，而该方法将仅被调用一次。

Created

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    number: 1
  },
  created() {
    this.update();
  },
  methods: {
      update() {
          setInterval(() => {
              this.number++
          }, 1000)
      }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <h1> Seconds : {{ number }}</h1>
</div>

在vue.js中进行递增和重新渲染：错误或功能？

1 个答案: