是什么影响了 Vue computed 属性是否会重新计算？

Question

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

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，请告诉我是什么影响了 Vue 计算属性是否重新计算。

Answer 1

Vue 有一些关于数组的行为需要注意。来自 the docs:

Vue cannot detect the following changes to an array:

When you directly set an item with the index, e.g. vm.items[indexOfItem] = newValue

When you modify the length of the array, e.g. vm.items.length = newLength

为确保 Vue 看到您的数组更改，请始终复制数组并 re-assign 它，如下所示：

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

是什么影响了 Vue computed 属性是否会重新计算？

What is affecting on will Vue computed property re-computed or no?

vue.js

vue-component

vue-property-decorator

是什么影响了 Vue computed 属性 是否会重新计算？

What is affecting on will Vue computed property re-computed or no?

vue.js

vue-component

vue-property-decorator

是什么影响了 Vue computed 属性是否会重新计算？