vue3中的Teleport和Suspense

一、Teleport

Vue.js 3.0 的新功能之一是 Teleport。因为有时，你可能需要将组件的一部分渲染到 DOM 树中的一个不同位置，而不是作为组件的直接子节点渲染。这就是Teleport的用途。

例如，模态对话框、提示、通知等都可能使用 Teleport。通常情况下，你可能想要将这些内容添加到应用的根或者 body 标签下，而不是嵌套在深层的 UI 结构里。Vue 3 中的 Teleport 提供了这样的机会，就是不管你的组件在哪里，你都可以将其子组件转移到DOM的任何位置。

在模板中，Teleport 的使用方法如下：

<teleport to="body">
  <div class="modal">
    <!-- 具体内容 -->
  </div>
</teleport>

'body' 是要传送组件的目标元素的选择器。你可以用任何有效的 CSS 选择器替换它。

以上面的模态框为例，一般的写法可能是：

<div class="parent">
   <div class="child">
      <div class="modal" v-if="showModal">
        I am a modal!
      </div>
   </div>
</div>

但如果使用teleport，就可以将modal独立出来：

<div class="parent">
   <div class="child">
   	  <teleport to="body">
  		<div class="modal" v-if="showModal">
 	 	  I am a modal!
 	 	</div>
	  </teleport>
   </div>
</div>

这样，无论在DOM树的何处调用模态框，模态框始终会被渲染到 body 元素下，这可以避免由于 CSS层叠上下文和 z-index 问题造成的样式问题。

二、Suspense

<Suspense> 是 Vue 3 中的一个新特性，它能够处理组件中的异步依赖并在等待过程中提供备用内容。

当我们使用异步组件时，组件需要一些时间来加载。在加载完成之前，我们通常会向用户展示一些加载状态。以前，我们需要在组件内部自己处理这个逻辑。但是现在，有了<Suspense>，我们可以将这个逻辑提升到组件外部。

Suspense 组件有两个插槽： default 插槽和 fallback 插槽。default 插槽用于放置那些可能含有异步依赖的组件，而 fallback 插槽则用于展示加载状态。

下面是一个使用示例：

<template>
  <Suspense>
    <template v-slot:default>
      <Child />
    </template>
    <template v-slot:fallback>
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

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

在以上代码中，Child 是一个异步组件。当这个组件正在加载时，Suspense 会自动切换到fallback插槽，并显示 “Loading…”。当组件加载完成后，Suspense 则会切换回default插槽，显示加载完成的组件。

Suspense 能让我们更方便地控制异步组件的加载状态，让代码看起来更加清晰，使我们能够将更多的精力集中在处理业务逻辑上。

三、nextTick

$nextTick 是 Vue.js 提供的一个全局API，它用于延迟执行一段代码，延迟到下一次 DOM 更新循环之后。这在修改数据之后立即操作 DOM 结构时非常有用。

使用 $nextTick 的基本方式如下：

this.someData = 'new value'
this.$nextTick(function () {
  // DOM 更新后的代码
})

例如，想象一下我们有一个 Vue.js 组件，它有一个列表。点击一个按钮将在列表中添加一个新的 item，然后我们想要滚动到这个新创建的 item。如果我们不使用 $nextTick，DOM可能会在我们尝试访问新元素之前还没有被更新。

举例来说：

new Vue({
  // ...
  
  data: {
    items: ['item 1', 'item 2', 'item 3'],
  },

  methods: {
    addItem() {
      this.items.push(`item ${this.items.length + 1}`);

      this.$nextTick(() => {
        const list = this.$el.querySelector('ul');
        list.scrollTop = list.scrollHeight;
      });
    },
  },
  
  // ...
})

在这个例子中，我们首先更新了 items 数据，然后使用 $nextTick 等待 Vue.js 更新 DOM。当回调函数被调用时，我们知道新的 item 已经被添加到了 DOM，然后我们滚动列表确保新 item 可以被用户看到。如果我们没有使用 $nextTick，list.scrollHeight 可能不会包含新 item，所以滚动操作可能不会如我们预期的那样工作。