How vue3 solves the problem of excessive loading in each scene-Vue.js-php.cn

How vue3 solves the problem of excessive loading in each scene

WBOY

Release： 2023-05-18 15:25:06

forward

1894 people have browsed it

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 <div id='app'> 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>

Copy after login

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 < Suspense>;
## 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>

Copy after login

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>

Copy after login

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 components and ????

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

Copy after login

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

Copy after login

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>

Copy after login

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!