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

WBOYforward: 2023-05-18 15:25:061830browse

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?

See more

How vue3 solves the problem of excessive loading in each scene

vue3 Common Excess

1. Loading when the page is first opened

2. When routing is switched, asynchronous component loading

Related articles