ハイドレーションとは、Vueがサーバーから送信された静的HTMLを取得し、クライアント側でのデータ変更に対応できる動的DOMに変換するクライアント側プロセスを指します。 詳細はこちら 。「製品」はちょうど落ち、devバージョンはdomに矛盾があると報告しました。 そして、ハイドレートしようとしてもdevバージョンはクラッシュせず、コンソールで報告するだけなので、エラーは明らかではなく、発見した間、かなりの時間が経ちました。
Vueの非常に興味深い戦略は、生産を待ってそこに落ちることです！複雑さの異なる1500のコンポーネントでは、タスクが単純化されませんでした。 その結果、問題を見つけて、適切なデバイスを見つけ、開発者コンソールで友達を作ることができました。
その結果、フッターコンポーネントが接続されるとアプリケーションがクラッシュすることが判明しました。 そして彼らが正しい線を見つけたとき、彼らは単に自分の目を信じなかった。 これ以外のものが期待されます。
電話番号を削除すると、問題なく水分補給が行われたことがわかりました。 彼らが掘り始めたとき、Safariはhtmlレイアウトを受け取った後、電話の横にあるタグを置き換え、それが実際にダイヤラーを引き起こしたことが判明しました。
当然、水分補給が始まると、サーバーと新しく構築された仮想ページからのページのDOMは一致しませんでした。 アプリケーションは、戦争を宣言せずにクラッシュしました。
この問題も予想外に解決されました。 これまで、通常の方法で電話を挿入しました。
<div>8 (800) 111 2 333</div>
解決策はv-textバインディングでした：
<div v-text=”8 (800) 111 2 333”></div>
私はこれについて理論を持っています。 誰かがそれを確認したり、それに反論したり（新しいものを提案）できるなら、私はとても感謝します。 私が理解しているように、Safariがドキュメントを受け取った後、Vueは仮想domを構築し、このドキュメントと比較し、このドキュメントをハイドレイトしながら、Safariは暗い作業を行い、電話をリンクに変更します。 このフィールドになると、v-textを使用したVueは、divの内容を必要なものに置き換えます。 その結果、比較の時点で、ドームは一致し、飛行は正常です。