vue mountedメソッドによる複数の問題の解決策の実行

2197 ワード

問題の背景
今日問題を解決するのを手伝う時1つのとても奇妙な問題に出会って、1つのボタンをクリックして別のページをジャンプして、彼のmounted方法は3回実行して、この問題を考えて私は確かに困惑して、ネットの資料を調べてv-ifv-showの問題だと言って、線の下で私は自分で検証しました.v-ifを使用するとmounted回以上になることは確かに見つかりませんでした.
解決策
まずこの問題に直面して、私はいくつかの原因がコンポーネントのライフサイクルの消滅を引き起こしたのではないかと考えて、そこで私はmounted関数の周りにdestroyedフックを追加して、私は中で内容を印刷して、結果は実行していないことを証明して、つまりコンポーネントはしっかりと3つ現れて、すべてが消滅していません.
以上、コンポーネント自体に特別な関数や操作があるかどうかを検証し、3回の宣言サイクルをトリガーします.結局、ボタンのクリックイベントやルーティングジャンプが1回実行された結果、それ自体に特別なコードがないことが証明されました(コンポーネント呼び出しのライフサイクルは3回で、確かに不思議です).
事はここまで来てまるで死の循環に入ったようで、手がつけられない.この时、私は黙ってf 12を开いて、dom要素の中からいくつかの端緒を调べようとしました.やはりf 12に表示されている状况は予想通りで、3つのコンポーネントがdom要素の底に并んでいて、下にはそれぞれdisplay: noneが设置されています.事実は确かに3つの独立したdomノードであることを示しています.この时、私は1つのとても特殊な情况を発见して、すべての要素の标致の情报は一致して、何が标致の情报で、前に私は1篇のvueの中でscopedの使用を総括したことがあって、その文章はdomのためにdata-a 6 disalvなどの标致の情报を生成してcss汚染の问题を避けることができると言って【日常の総括はやはりとても役に立ちます】.
この时、もっと考えてみると、この3つのコンポーネントは、1つ1つではなく、3つで生成されていることに気づきます.並列操作に属し、次のことがさらに証明され、コンポーネントを閉じるボタンをクリックした後、1つクリックすると、他のコンポーネントも消えてしまいます.この時問題ははっきりしていて、ほどこの問題を説明できるものはありません.
最初はrouter-viewを勉強していましたが、私は深く入り込んでいませんでした.ただ、彼が親子コンポーネントとしてネストされたルーティングジャンプのツールであることを覚えていました.彼がまだこの機能を持っているとは思いませんでした.次に、当時のコードの輪郭を貼って分析します.
アセンブリA、アセンブリB、および容器C.コンポーネントAをクリックすると、コンポーネントBにジャンプできますが、CはコンポーネントAのコンテナとして存在します.
A

      ,   B



B

123321


C





はい、登録の過程はすべて省略して、次の質問は1つ目のAをクリックして、いくつかの123321が現れて、正解の3つ.
Cの2つのAは独立したコンポーネントとして現れているが、よく考えてみると、このようにコンポーネントを導入すると、ページに3つ存在し、同じコンポーネントが3回レンダリングされることになるが、彼らは同じである.
まとめ
実はこの問題は解決してもよく解決していると言って、正常なコードを書く方法で言えば永遠に出会うことはありません.核心は、コンポーネントの中でを使用しないでください.
最後に
バグに遭遇するのは怖くありません.あなたが解決の道で絶えず彼に打撃を受けて放棄することを恐れています.実はバグを解決して、もしあなたがコピーした他の人のコードで、しかも既知のコードが他の人のところで一致しているならば、私は一般的に変数法を制御して、このコードを黒い箱として、同じパラメータを伝えて、それから行ごとにdebuggerを見て、どの変数が原版と出入りしているかを見て、往々にして小さいところほど問題が発生する可能性があります.例えば、パラメータの伝達、リクエストの発起など(これは多くの問題を解決してくれた).