vue.js - 对 Vue 计算属性是否会重新计算有什么影响？

Question

我希望currentSelectionViewContent每次selectedOptionsIndexes发生变化时都会重新计算。真的，有时它有效，有时 - 不是。

import { Component, Prop, Vue, Watch } from "vue-property-decorator";

@Component({
  template
})
export class SelectField extends Vue {

  private onNewOptionSelected(newOption: SelectField.Option, indexInArray: number): void {

    console.log("~~~~~~~~~~~~~~~");
    console.log(JSON.stringify(this.selectedOptionsIndexes, null, 2));

    this.selectedOptionsIndexes[0] = indexInArray;

    console.log(JSON.stringify(this.selectedOptionsIndexes, null, 2));
    console.log("--------------");

    if (isUndefined(newOption.key)) {
      this.$emit("change", newOption.relatedEntity);
    } else {
      this.$emit("change", newOption.key);
    }
  }

  // Vue computed property in "vue-property-decorator" syntax
  private get currentSelectionViewContent(): string {
    console.log("Recomputing ...");
    switch (this.selectedOptionsIndexes.length) {
      case 0:
        return SelectField.DEFAULT_NOTHING_SELECTED_PLACEHOLDER;
      case 1:
        return this.selectOptions[this.selectedOptionsIndexes[0]].title;
      default:
        return SelectField.DEFAULT_MULTIPLE_OPTIONS_SELECTED_LETTERING;
    }
  }
}

工作案例：

不工作的情况（没有重新计算）：

我很抱歉没有为这种情况创建repro（复制导致此问题的组件，它的依赖关系和环境）需要很长时间。如果您在没有 repro 的情况下无法理解这里有什么问题，请教我影响 Vue 计算属性是否会重新计算。

Answer 1

Vue 有一些关于数组的行为需要注意。从文档：

Vue 无法检测到数组的以下更改：

• 当您直接设置带有索引的项目时，例如 vm.items[indexOfItem] = newValue
• 当你修改数组的长度时，例如 vm.items.length = newLength

为确保 Vue 看到您的数组更改，请始终制作数组的副本并重新分配它，如下所示：

var updatedIndexes = [...this.selectedOptionsIndexes]; // Copies array
updatedIndexes[0] = indexInArray; // Update the copy
this.selectedOptionsIndexes = updatedIndexes; // Overwrite with copy