謎の技術研究部ホームタグ謎の技術研究部とはTop›プログラミング›Node.js2020-04-24【Vue.js】オブジェクト(連想配列)をリアクティブにするVue.jsにて画面が再描画されない問題、つまりオブジェクトをリアクティブにする方法を分かりやすく解説。オブジェクトがリアクティブとは?順を追って説明する。次のようなData部がある。}と表示されるはずだ。mountedmounted()に次のコードを追加する。}mountedはここでは理解する必要はない。}となることを期待したコードだ。実際は次の表示になる。}これがリアクティブではない状態だ。初心者が躓く箇所である。"b"は描画されないのだろうか。デバッガで確認する画面上はまだ"a"しか表示されていない状態でvueのデバッガを見てみる。objはどうなっているだろうか(デバッガの使い方が分からなければconsole.log(obj)でもよい)間違いなく"b":0も追加されている。画面には描画されていない。リアクティブにするにはこれは公式の「リアクティブの探求」ページに記載されている。プロパティの追加または削除を検出できません。オブジェクトに存在しなければなりません読んでもよくわからないと思う。英語を日本語に直したものなのでイマイチピンとこない。要するに、初めにdata部で定義されていた物を除いて後からオブジェクトにキーを追加しても再描画されないよということである。すればよいのだろうか。リアクティブなキーを追加するコードがある深く考えずに次のコードを通してオブジェクトを更新してやれば良い。同じ意味合いでありながら、キー"b"をリアクティブにすることが出来るコードだ。要するにキーを直接追加するのではなく一旦Vue本体を通して更新してやることでVueがリアクティブなオブジェクトとして認識できるようになったと考えておけば良い。おまけ:配列をリアクティブに「オブジェクトではなく配列をリアクティブにする」場合は配列に.splice()を付けて更新してやれば良い。基本はこれだけで終了だ。ここからはリアクティブの「探求」ちょっと別のコードで研究をしてみる。次のコードにしたらどうなるだろうか。}"b"は非リアクティブ、"a"はリアクティブだ。}どうやらリアクティブな"a"が更新されたため、同じobj内の"b"の描画も更新された。次の実験これはどうか。}こんどは"b"に0を入れて"a"を更新した後にさらに"b"を更新している。}しっかりと更新されている。内がすべて実行された後に再描画される。余談:これは一つの関数内で大量の再描画が必要そうなコードがあっても、纏めて1回更新にすることで無駄な描画負荷を減らすVueのアルゴリズムだ。別のオブジェクトは?なら次はどうだろう。</div></template>uhoオブジェクトを追加した。data部には先程と同じobjは記述してあるが、uhoオブジェクトは全く定義していない。}uhoは表示されない。ここまで学習していればuhoが描画されない理由は分かるだろう。次のコードをに変更する。}なるほど、uhoオブジェクトも更新された。リアクティブな何かが更新されれば、同時に別のリアクティブじゃない物も再描画されるらしい。この関係性を正しく理解していないと、予期せずリアクティブな物と非リアクティブな物を混在した場合に時々再描画されないバグや、コードを変えた途端に描画が意図しないものになる可能性がある。以上の理由から初めからキー構造をdata部に列挙しておくのが重要ということが分かる。必要となるパターンもある。これは高度なテクニックであるため詳しくは説明しないがシンプルで分かりやすいサイトがあったので外部リンクを載せておく。実は度々この問題で頭を悩ませていた。今回これでクリアになったのでもう迷わないだろう。Vueの少し難しい領域だが絶対に覚えておきたい項目だ。仮想トイレプログラミングや仮想通貨のシステムトレードに関する情報を発信中。どんな情報を流しても詰まらないトイレ。謎の技術研究部とはプライバシーポリシーホーム(自動スクロールなし)ご意見、お問い合わせ。