Vue.jsでリアクティブなオブジェクトを生成するためのVue.setを紹介

2020-10-21

Vue.jsでオブジェクトの要素の変更を検知できない時

初めてVuexでObjectに対して要素を追加したときにその変更が算出プロパティに通知されずに頭を捻らせた経験がVue.jsを書いた人ならあるかと思います。これはVue.jsの仕様です。公式ドキュメントには次のように書かれています。

Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

「Vue.js:Change Detection Caveats」 https://vuejs.org/v2/guide/reactivity.html

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` is now reactive

vm.b = 2
// `vm.b` is NOT reactive

要はVue.jsが初期化された段階で定義されていないオブジェクトの要素はリアクティブにならないということです。

リアクティブなオブジェクトを生成するためにはVue.setを使え

ではリアクティブなオブジェクトの要素を追加するにはどうすれば良いでしょうか？この場合Vue.setを使用します。Vue.setは第1引数に追加する元のオブジェクト、第3引数に追加するオブジェクトのキー、第3引数に追加するオブジェクトの値を指定します。

Vue.set(object, propertyName, value)

こうすることで、この追加したオブジェクトの要素が変更されたとき算出プロパティがその変更を検知できるようになります。また公式ドキュメントを読んで気がついたのですがグローバルのVue.setのエイリアスvm.$setを使用することで同じようにオブジェクトの要素をリアクティブにすることができるようです。

vm.$set(object, propertyName, value)

では今日はこの辺りで失礼します。

参考文献:

https://vuejs.org/v2/api/#Vue-set