Vue.jsで算出プロパティ（computed）の値が更新されないときの対処法

Vue.jsには算出プロパティという、データにアクセサー（get/set）を設定できる便利な機能がある。

Vue 2では例えばこんな書き方をする。

// (前略)
computed: {
  sampleComputed: {
    get() {
      return this.sampleValue;
    },
    set(newValue) {
      // check new value.
      if(newValue.data < 0) {
        throw "invalid value: sampleComputed";
      }
      this.sampleValue = newValue;
    }
  }
}
// (後略)

dataのようにただ値を持つだけでなく、かといってメソッドのような重たい処理をする訳でもなく、値を読み出すときや更新するときに値のチェックや変換など「ちょっとしたひと手間」を加えたいときに重宝する。

値を読み取り専用にしたいときにも重宝する。

しかしこの算出プロパティでときどきこんなことがある。

たしかにプロパティの値を読み出したのに、アクセサー（get）の処理が走っておらず、最新の値が取得できていない！／(^q^)＼ntkt

私の場合、原因はVue.jsのキャッシュ機能だった。

算出プロパティには、依存するプロパティの値が変わらない限り同じ値を返し続ける（キャッシュを持っておく）という機能が備わっている。

例えば、プロパティの依存先がオブジェクトであり、そのオブジェクトが中で抱えているプロパティの値が変わったとしても、

オブジェクトそのものが変わったことにはならないため、算出プロパティはキャッシュした値を返してしまう。

性能上ベストな方法ではないかも知れないけど、次の方法でアクセス毎に毎回アクセサー（get）が呼び出されるように修正できた。

問題となっている算出プロパティのキャッシュ機能をOFFにする。

先ほどの算出プロパティの例では次の5行目を追加する。

// (前略)
computed: {
  sampleComputed: {
    // この行を追加する。
    cache: false,
    get() {
      return this.sampleValue;
    },
    set(newValue) {
      // check new value.
      if(newValue.data < 0) {
        throw "invalid value: sampleComputed";
      }
      this.sampleValue = newValue;
    }
  }
}
// (後略)

WPFのようにプロパティの依存先の値が変わったことを明示的に示す方法があれば、それを使うようにしたい。

もうちょっと調べてみようかな。