Vue.js 绑定性能差

Question

我遇到了一个让我大吃一惊的性能问题。 给定以下组件：

<template lang="pug">
div
  div {{ counter }}
  div(v-for="idx in new Array(10000).keys()", :key="idx")
    b-button(v-on:click="increment()") ++
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  private counter = 0;

  increment() {
    console.log(Date.now());
    this.counter++;
  }
}
</script>

我希望当我更改 counter 时，vue 不会重新渲染整个组件。看来我错了，当counter 更改时，我的表现很糟糕。我是否遗漏了什么，vue 应该如何工作？

更新

我用预先计算的值替换了new Array(10000).keys() 调用，但性能保持不变。用常规按钮替换 b-button 可以显着提高性能，这向我表明，由于某种原因，每次 counter 更改时都会重新创建所有按钮。

<template lang="pug">
div
  div {{ counter }}
  div(v-for="idx in keys", :key="idx")
    b-button(v-on:click="increment()") ++
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Test extends Vue {
  private counter = 0;
  private keys = [...new Array(10000).keys()];

  increment() {
    console.log(Date.now());
    this.counter++;
  }
}
</script>

更新

删除div {{ counter }} 绑定可以获得完美的性能（例如，替换为div 0）。

Answer 1

问题是您在内部使用了一个函数并在循环中创建了一个新实例，然后对其进行循环，因此每次 counter 更新时，“新数组”都会再次启动。

更新

问题在于您的“new Array(100).keys()”，每当您更新“counter”时，它都会因此重新渲染。

如果你使用普通数组数据而不是那个地方，它会起作用并且你不会遇到重新渲染问题。

使用计算属性：

dataArrayKey () {
            return [...new Array(10000).keys()]
          }

然后在循环中，使用计算出来的属性数组，像这样：

<template lang="pug">
div
  div {{ counter }}
  div(v-for="idx in dataArrayKey", :key="idx")
    b-button(v-on:click="increment()", :key="idx + '-button'") ++
</template>