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>

补充:position:fixed 降级为absolute的问题

position:fixed 降级为absolute的问题

本篇文章汇总一下position:fixed 降级为absolute的情况

transform影响fixed

元素设置position:fixed后大家都知道可以让元素不跟随滚动条滚动（固定到视口），但是transform可以把position:fixed干掉让其降级成absolute。

<div style="transform:scale(1);">
    <img src="mm1.jpg"style="position:fixed;" />
</div>

本身应该不动的图片因为父级设置了transform而变成了absolute的效果。

filter

CSS3滤镜（filter）

CSS3 中filter滤镜属性，也会把position:fixed干掉让其降级成absolute。

到此这篇关于Vue3新特性Suspense和Teleport的文章就介绍到这了,更多相关Vue3 Suspense和Teleport内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！