ホームページ >ウェブフロントエンド >Vue.js >vue3 は各シーンの過剰な読み込みの問題をどのように解決するか

vue3 は各シーンの過剰な読み込みの問題をどのように解決するか

WBOY
WBOY転載
2023-05-18 15:25:061852ブラウズ

    vue3 Common Excess

    1. ページを最初に開いたときにロードする

    ページを最初に開いたときにコンテンツをロードするのが最も簡単です。ルート ディレクトリ 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 にマウントされます。内部が置き換えられます;

    2. ルーティングが切り替わると、非同期コンポーネントがロードされます

    • ルートが過度に切り替わる場合は、最初に 1 つ理解する必要があります。 vue3 のコンポーネント内 bb06e69d307cb52103d07d8f9dd385e5;

    • ##bb06e69d307cb52103d07d8f9dd385e52 を提供しますスロット??????;

    • #default: ロードされるコンテンツ;

    • #フォールバック: ロード後に表示されるコンテンツ;

    • <Suspense>
      	<template #default>
      		<router-view />
      	</template>
      	<template #fallback>
      		<h2>加载中......</h2>
      	</template>
      </Suspense>

    同様に: (非同期コンポーネントの切り替え)

    <template>
    	<Suspense>
    		<template #default>
    			<AsyncComp  v-if = &#39;vitblie&#39; />
    		</template>
    		<template #fallback>
    			<h2>加载中......</h2>
    		</template>
    	</Suspense>
    	
    	<button @click=&#39;open&#39;> 切换 </button>
    </template>
    <script setup>
    	import { defineAsyncComponent , ref } from &#39;vue&#39;;
    	const asyncComp = defineAsyncComponent(()=>important(&#39;./asyncComp.vue));
    
    	const vitblie = ref(false);
    	function open(){
    		vitblie.value = !vitblie.value;
    	}
    </script>

    非同期コンポーネントでも、同じ方法で追加できます。

    トランジション アニメーションの追加

    トランジション アニメーションを追加するには、まず

    vue3 組み込みコンポーネント2fedc364daa6d2b978de736db6089c6d#を理解する必要があります。 ## and87a2e53b90599db3250d06933523db3b ????

    9366e37985177da7839522e36133b6c8

    : 非常に単純で、1 つの is だけがコンポーネントを表示します。これは、次のようなコンポーネントを切り替えるために使用できます: <pre class="brush:php;toolbar:false"> &lt;template&gt; &lt;Component :is=&quot;visible ? TestComp : &amp;#39;&amp;#39; &quot; /&gt; &lt;/template&gt;</pre>

    87a2e53b90599db3250d06933523db3b

    : Show/Hide に挿入されたコンテンツ トランジション アニメーションを追加し、 # でつなぎ合わせます。 ##name 属性 class 例:

     <template>
     	<transition name=&#39;anime&#39;>
     		<TestComp v-if=&#39;visblte&#39; /> 
     	</transition>
     </template>
    スタイルを設定します ここに name

    属性を渡します

    anime -enter-active
    : 遷移状態 (設定

    hide=> show 遷移時間などのパラメータ) anime-leave-active: 遷移状態 (設定
    show=> Hide 遷移時間とその他のパラメータ)anime-enter -from
    =>
    anime-enter-to Hide=> 開始スタイルと終了スタイルを表示 anime-leave-from = >
    anime-leave-to Show=> Hide 開始スタイルと終了スタイル 組み合わせ??????

    <template>
    	<router-view v-slot={ Component } >
    		<transition name=&#39;anime&#39;>
    			<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 サイトの他の関連記事を参照してください。

    声明:
    この記事はyisu.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。