Vue.jsはJavaScriptのフレームワークで、目玉の機能として変数の値の変化に同期して画面上の描画を変更する機能があります。変数の変化は変数の監視機能で実現されていますが、オブジェクトや配列のプロパティをどこまで監視するかという問題があります。JavaScriptである以上prototypeと付き合っていく必要があり、再帰的にプロパティを見ることはprototypeを大量に見ることにつながり計算量的な問題が発生します。
Vue.jsではいくつかの配列用のメソッドを上書きすることによって監視を実現しています。
push()pop()shift()unshift()splice()sort()reverse()
このため
a[a.length + 1] = 1;
の様にするよりも
a.push(1);
の様に配列操作メソッドを使うことが推奨されます。
上記のリストには配列中のある値を変更するためのメソッドが存在しません。加えてVue.jsはプロパティの変更を検知しません。
a[0] = 1;// Vue.jsは変数aが変化したことに気づかない
このような時には
vm.$set(/** 変更対象元の配列やオブジェクト */vm.items, /** インデックスやプロパティ名 */indexOfItem, /** 変更後の値 */newValue)
の様にvm.$set()なるVue.jsにこの変数は変更したと通知するメソッドで値を変更することになります。
原因はわかりませんでしたが、これでもなお画面が変化しないことがありました。このような時には
vm.$forceUpdate();
なる強制再描画メソッドを呼び出します。このメソッドの再描画は特徴的で、呼び出したコンポーネントとその子コンポーネントでのみ再描画をします。とにかく更新したい時には、大本の親コンポーネントにvm.$forceUpdate()を実行するイベントを設定して子コンポーネントから発火させる方法が望ましいでしょう。
