search

Home  >  Article  >  Web Front-end  >  How vue3 solves the problem of excessive loading in each scene

How vue3 solves the problem of excessive loading in each scene

WBOY
WBOYforward
2023-05-18 15:25:061835browse

    vue3 Common Excess

    1. Loading when the page is first opened

    It is easiest to load content when the page is first opened. Adding content to 43385b86c17e4e8e6ef603bd5efdffc9 through the root directory

    index.html

    file is excessive content

    <body>
   <div id="app">
      <h2>加载中......</h2>
   </div>
   <script type="module" src="/src/main.js"></script>
</body>

    When the vue instance is created, it is mounted into the div of id='app' through the .mount() method, and the loading content inside will be replaced;

    2. When routing is switched, asynchronous component loading

    • If the route is switched excessively, you need to understand one first, the built-in component of vue3 b7d391b0a8e9eea5e525c473b7ead7d2;

    • ##bb06e69d307cb52103d07d8f9dd385e5 provides 2 slots????;

    • #default: A content to be loaded;

    • #fallback: A content to be displayed after loading;

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

    Similarly: (Switching of asynchronous components)

    <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>

    Asynchronous components can also be added using the same method

    Add transition Animation

    To add transition animation, you need to first understand

    vue3 built-in components9366e37985177da7839522e36133b6c8 and87a2e53b90599db3250d06933523db3b ????

    9366e37985177da7839522e36133b6c8: Very simple, only one is displays the component, which can be used to switch components, such as: 

     <template>
 	<Component :is="visible ? TestComp : &#39;&#39; " /> 
 </template>

    87a2e53b90599db3250d06933523db3b : Content inserted in Show/Hide Add transition animation and splice it through the name attribute class Such as: 

     <template>
 	<transition name=&#39;anime&#39;>
 		<TestComp v-if=&#39;visblte&#39; /> 
 	</transition>
 </template>

    Set the style Pass the

    name attribute here

    ##anime-enter-active

    : Transition state (set hide=> show transition time, etc. Parameters)anime-leave-active
    : transition state (settingshow=> hide transition time and other parameters)
    anime-enter -from
    => anime-enter-to Hide=> Show start and end styles anime-leave-from
    = > anime-leave-to Show=> Hide Starting and ending styles

    Combined????
    <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>

    The above is the detailed content of How vue3 solves the problem of excessive loading in each scene. For more information, please follow other related articles on the PHP Chinese website!

    html class default 异步 transition
    Statement：
    This article is reproduced at:yisu.com. If there is any infringement, please contact admin@php.cn delete
    Previous article：What is the method of encapsulating axios and using mock.js with vue3 and ts?Next article：What is the method of encapsulating axios and using mock.js with vue3 and ts?

    Related articles

    See more