vueでrefsを使用してDOMを定位するとundefinedが発生する解決方法

以前の会社でのプロジェクトでは、refを使用してDOMノードを定位するのが非常に便利だと思っていました。しかし、問題が発生しました。それはmounted(){}ヒューカ内でthis.$refs.xxxを使用するとundefinedが表示されることでした。

私は以前のrefを使用した.vueファイルと比較してみましたが、その違いを見つけました。

あるDOMノードが見つからない理由を知りたい場合は、まずmounted(){}というヒューカ関数が何をするのかを理解する必要があります。

以下はvue公式が提供するvueライフサイクル（一部を含む）です。公式の言葉通りに、最初は理解する必要はありませんが、学習と使用を進めるにつれて、その参考価値が高まります。

　

実際には、mounted段階ではDOM構造が準備ができていますが、ここでの準備ができたことには特に注意が必要です：

DOM構造が生成された後でも、DOM構造内の特定のDOMノードがvを使用している場合、-if、v-showまたはv-for（つまり、取得した後端データに基づいてDOMを動的に操作すること、つまり応答型）、これらのDOMはmounted段階で再び見つからなくなります。

このmounted段階は、通常後端リクエストを発行し、データを取得し、ルートヒューカと連携していくことが多いです。簡単に言えば、mountedヒューカ内でデータをロードするだけで、ロードされたデータはこの段階でDOMを更新することはありません。

もしmountedヒューカ中使用$refsなら、refがvに定位されている場合、-if、v-for、v-showの中のDOMノードは、undefinedが返されるだけであり、mountedフェーズではそれらが存在しないためです！！

確認の結果、上記のテキストは誤りです。$refsが見つからない主な理由はv-if、v-for、v-showこの文が親コンポーネントから渡されたパラメータに依存している場合、このパラメータはmounted()フェーズで子がまだ取得できない場合があります〜〜〜〜〜〜〜

DOMが実際に読み込まれた後にデータを取得するには、VUEの全体的なAPIを呼び出す必要があります：this.$nextTick(() => {})

mountedフェーズが読み込みフェーズであるのに対し、updatedフェーズはデータがDOMに更新されたフェーズ（読み込んだデータを処理するフェーズ）です。この時点で、ref、データなどがすべてDOM構造にマウントされ、updateフェーズでthis.$refs.xxxを使用して、100%がこのDOMノードを見つけることができます。

updatedとmountedの違いは、DOM構造が更新されるたびに、Vueはupdated(){}フック関数を一度だけ呼び出すことです。一方、mountedはたった一度だけ実行されます。

簡単に言えば、デバッグ中に要素が存在するのを見える限り、updatedフェーズでthis.$refs.xxxを使用して対応するDOMノードを見つけることができます！

refの使用について、公式ドキュメントでは以下のヒントが提供されています：

　

使用するときは注意してください- -

これで本記事のすべての内容が終わりました。皆様の学習に役立つことを願っています。また、ナイアラ・チュートリアルを多くのサポートをお願いします。

声明：本記事の内容はインターネットから提供され、著作権者はすべての権利を保持しています。インターネットユーザーが自発的に貢献し、アップロードしたコンテンツであり、本サイトは所有権を持ちません。また、人工的な編集処理は行われておらず、関連する法的責任も負いません。著作権侵害が疑われる内容がある場合は、以下のメールアドレスにご連絡ください：notice#oldtoolbag.com（メールを送信する際、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認がついたら、本サイトは侵害された内容をすぐに削除します。）