Vue3新特性Suspense和Teleport

一、Suspense【试验性，可能变动，生产环境请勿使用】

官方说明：在正确渲染组件之前进行一些异步请求是很常见的事。suspense允许将等待过程提升到组件树中处理，而不是在单个组件中。

实例： 有一个组件的一些数据需要异步请求，请求完成后再渲染。为了显示友好，我们会在请求返回前显示一个Loading。进入页面，显示 Loading，3秒后，显示为 Hello

1.1. vue2实现

在vue2中，通常我们是定义一个变量来操作这个loading的显示与否

<template>
  <div class="pager">
    <div v-if="loading">Loading</div>
    <div v-else>{{data}}</div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: true,
        data: ''
      }
    },
    created() {
      this.load();
    },
    methods: {
      load() {
        this.loading = true;
        return new Promise((resolve) => {
		  setTimeout(()=>{
		    this.data= 'hello'
            this.loading = false;
			resolve('hello')
		  }, 3000)
	   })
      }
    }
  }
</script>

1.2. vue3-suspense 实现

1.2.1. 父组件

//父组件
 
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
 
<template>
	<suspense>
	  <template #default>
	    <HelloWorld/>
	  </template>
	  <template #fallback>
			Loading
		</template>
	</suspense>
</template>

1.2.2. 子组件-helloWold

//子组件 - HelloWorld
 
<script setup>
import { ref } from 'vue';
const data = ref('');
 
const load = function() {
	return new Promise((resolve) => {
		setTimeout(()=>{
			data.value = 'hello'
			resolve('hello')
		}, 3000)
	})
}
 
await load(); 
 
</script>
 
<template>
  {{data}}
</template>

关键点： await将setup隐性添加了一个async的关键字，也就是 Promise的返回
注意事项： 子组件的加载方式为异步加载 ，或者子组件的setup应返回一个Promise，async关键字为隐性的Promise返回。

二、Teleport【传送】

远距离传送, 可以将teleport内的element移到组件外的特定位置。

官方说明： Teleport 提供了一种干净的方法，允许我们控制在DOM中哪个父节点下渲染了 HTML，而不必求助于全局状态或将其拆分为两个组件。

优点： 添加组件的灵活性，原先由于布局、层级等原因【类似按钮和触发弹窗等】，需要拆分到不同位置【不同组件】的相关联操作，也可以更好的封装起来。

props：【官方摘要】

• to[string]。必填，必须是有效的查询选择器或 HTMLElement (如果在浏览器环境中使用)。指定将在其中移动 内容的目标元素
• disabled[boolean]。可选，此属性可用于禁用 的功能，这意味着其插槽内容将不会移动到任何位置，而是在你在周围父组件中指定了 的位置渲染。

Teleport 是一种能够将我们的模板移动到 DOM 中 Vue app 之外的其他位置的技术。

2.1. Teleport用法

用法非常简单，只需要使用 to 这个属性就可以把组件渲染到想要的位置

// 渲染到body标签下
<teleport to="body">
  <div class="modal">
    I'm a teleported modal!
  </div>
</teleport>

也可以使用

<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" />

必须是有效的查询选择器或 HTMLElement。

2.2. 应用场景

当自己封装一个弹窗的时候，我们使用 position: fixed，当父元素使用 transform或者filter滤镜的时候，会使得position: fixed降级为absolute，这个时候我们就可以利用Teleport，把元素追加到body上面

position:fixed 降级为absolute的问题

// 渲染到body标签下
<teleport to="body">
  <Modal></Modal>
</teleport>