ホームページ > 記事 > ウェブフロントエンド > vue3 は各シーンの過剰な読み込みの問題をどのように解決するか
ページを最初に開いたときにコンテンツをロードするのが最も簡単です。ルート ディレクトリ index.html
ファイル
を介して 43385b86c17e4e8e6ef603bd5efdffc9
にコンテンツを追加すると、過剰なコンテンツ
<body> <div id="app"> <h2>加载中......</h2> </div> <script type="module" src="/src/main.js"></script> </body>
vue インスタンスが作成されると、.mount()
メソッドと loading
コンテンツを通じて id='app'
の div にマウントされます。内部が置き換えられます;
ルートが過度に切り替わる場合は、最初に 1 つ理解する必要があります。 vue3
のコンポーネント内 bb06e69d307cb52103d07d8f9dd385e5
;
##bb06e69d307cb52103d07d8f9dd385e5 は
2 を提供しますスロット??????;
#default: ロードされるコンテンツ;
#フォールバック: ロード後に表示されるコンテンツ;
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense>
同様に: (非同期コンポーネントの切り替え)
<template> <Suspense> <template #default> <AsyncComp v-if = 'vitblie' /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense> <button @click='open'> 切换 </button> </template> <script setup> import { defineAsyncComponent , ref } from 'vue'; const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue)); const vitblie = ref(false); function open(){ vitblie.value = !vitblie.value; } </script>非同期コンポーネントでも、同じ方法で追加できます。トランジション アニメーションの追加トランジション アニメーションを追加するには、まず
vue3 組み込みコンポーネント
2fedc364daa6d2b978de736db6089c6d#を理解する必要があります。 ## and87a2e53b90599db3250d06933523db3b
????
: 非常に単純で、1 つの is
だけがコンポーネントを表示します。これは、次のようなコンポーネントを切り替えるために使用できます: <pre class="brush:php;toolbar:false"> <template>
<Component :is="visible ? TestComp : &#39;&#39; " />
</template></pre>
: Show/Hide
に挿入されたコンテンツ トランジション アニメーションを追加し、 # でつなぎ合わせます。 ##name 属性 class 例:
<template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>
スタイルを設定します ここに
name 属性を渡します: 遷移状態 (設定hide=> show
遷移時間などのパラメータ)
anime-leave-active: 遷移状態 (設定
show=> Hide遷移時間とその他のパラメータ)
anime-enter -from
=>
anime-enter-toHide=>
開始スタイルと終了スタイルを表示
anime-leave-from = >
anime-leave-toShow=> Hide
開始スタイルと終了スタイル
組み合わせ??????<template> <router-view v-slot={ Component } > <transition name='anime'> <component :is="Component" /> <transition> </router-view> <template> <style scoped> .anime-enter-active, .anime-leave-active { transition: all 1s; } .anime-leave-from { transform: translateY(0); } .anime-leave-to { transform: translateY(-100%); } .anime-enter-from { transform: translateY(100%); } .anime-enter-to { transform: translate(0); } </style>
以上がvue3 は各シーンの過剰な読み込みの問題をどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。