vue-vue3(9)-Fragment，Teleport，Suspense

vue-vue3(9)-Fragment，Teleport，Suspense

1.Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

2.Teleport

• 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

  
  	
  
  		
  
  			
  我是一个弹窗
  			关闭弹窗
  		
  	
  
  

3.Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    

  • 使用Suspense包裹组件，并配置好default与 fallback

Teleport 示例

App.vue

<template>
	<div class="app">
		<h3>我是App组件h3>
		<Child/>
	div>
template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
style>

Child.vue

<template>
	<div class="child">
		<h3>我是Child组件h3>
		<Son/>
	div>
template>

<script>
	import Son from './Son'
	export default {
		name:'Child',
		components:{Son},
	}
script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
style>

Son.vue

<template>
	<div class="son">
		<h3>我是Son组件h3>
		<Dialog/>
	div>
template>

<script>
	import Dialog from './Dialog.vue'
	export default {
		name:'Son',
		components:{Dialog}
	}
script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
style>

Dialog.vue

<template>
	<div>
		<button @click="isShow = true">点我弹个窗button>
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一个弹窗h3>
					<h4>一些内容h4>
					<h4>一些内容h4>
					<h4>一些内容h4>
					<button @click="isShow = false">关闭弹窗button>
				div>
			div>
		teleport>
	div>
template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
style>

Suspense 示例

App.vue

<template>
	<div class="app">
		<h3>我是App组件h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			template>
			<template v-slot:fallback>
				<h3>稍等，加载中...h3>
			template>
		Suspense>
	div>
template>

<script>
	// import Child from './components/Child'//静态引入
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入
	export default {
		name:'App',
		components:{Child},
	}
script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
style>

Child.vue

<template>
	<div class="child">
		<h3>我是Child组件h3>
		{{sum}}
	div>
template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
style>