渲染中的 Vue 无限警告，带有 Vuetify 选择框的计算属性

Question

我有一个看似简单的问题，我需要反转作为道具传入的对象列表，并将它们显示在 vuetify 选择框中。我的模板是这样的；

  <v-col cols="12" lg="4" xl="4">
    <v-select
      v-model="paysFor"
      label="Pays for.."
      :item-text="text"
      :item-value="value"
      :items="reverseLessons"
    ></v-select>
  </v-col>

我知道我不能在原始列表上调用 .reverse()，所以我使用了计算属性；

props: {
    lessons: {
      default () { return [] },
      type: Array
},
computed: {
     reverseLessons () {
        const rev = this.lessons

        return rev.reverse()
    } 
}

我的理解是这应该有效吗？但是我仍然收到警告，而不是每次渲染，但有时仍会出现。该组件非常简单，它只有几个道具，所以我确定这是我上面提到的东西所缺少的东西。任何帮助都表示赞赏。

Answer 1

reverse 是按引用操作的，因此更新了原始数组并触发了大量更新。反转操作是 O(n) 复杂度（参见What is the time complexity of this in-place array reversal?）。为避免这种情况，只需克隆数组，例如使用解构：

const rev = [...this.lessons];