Vue.jsの配列監視

著者:杉浦

Vue.jsの配列監視

 Vue.jsはJavaScriptのフレームワークで、目玉の機能として変数の値の変化に同期して画面上の描画を変更する機能があります。変数の変化は変数の監視機能で実現されていますが、オブジェクトや配列のプロパティをどこまで監視するかという問題があります。JavaScriptである以上prototypeと付き合っていく必要があり、再帰的にプロパティを見ることはprototypeを大量に見ることにつながり計算量的な問題が発生します。
 Vue.jsではいくつかの配列用のメソッドを上書きすることによって監視を実現しています。

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

リストレンダリング — Vue.js#配列の変化を検出より引用

 このため

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()を実行するイベントを設定して子コンポーネントから発火させる方法が望ましいでしょう。

  • この記事いいね! (0)

著者について

杉浦 administrator