了解 Vue3 套件的显着新功能（第 2 部分）

学习Vue3值得注意的新特性系列之（二）

显着的新功能

Vue 3 新功能包括：

组合API
传送
片段
启动组件选项
[createRenderer API 来自 @vue/runtime-core

](github.com/vuejs/vue-n…
【单文件组件组合API语法糖(<script setup>)

](github.com/vuejs/rfcs/…
[单个文件组件状态控制的 CSS 变量 (<style vars>)

](github.com/vuejs/rfcs/…
单独的文件组件<style scoped>现在可以包含一般规则或仅适用于网站内容的规则

传送

Teleport是什么？它解决什么问题？

Teleport中文翻译：

y。精神交通（事物、人）；长途运输
n。通讯卫星；传送

有很多小伙伴/大佬，也叫任门，即时动作组件，小伙伴可以根据自己的理解，樱小桃（我）统一用英语Teleport讲。

Teleport是一种技术，可以将我们的模型渲染到指定的DOM节点，不受父节点style、v-show属性的影响，但data仍然可以共享；与 React 的 Portal 类似。

标签

teleport包含to属性，该属性定义了已安装对象DOM的节点

  <template>
    <div class="hello">
      <span>Hello World</span>

      <teleport to="#teleport-target">
        <span>Hello Teleport</span>
      </teleport>
    </div>
  </template>



<script>
  export default {
    beforeCreate() {
      const node = document.createElement("div");
      node.id = "teleport-target";
      document.body.appendChild(node);
    },
  };
  </script>

如图：

学习Vue3值得注意的新特性系列之（二）

**它解决了什么问题？ **Teleport 主要用于逻辑上属于某个组件，但从技术角度来看需要将其移动到其他节点（主体或具有某些 ID 的元素）。最常见的场景是创建一个包含全屏空间的组件。逻辑存在于组件中，但基于css样式，需要将其移至body元素中。 vue3 官方文档：Teleport 为我们提供了一种清晰的方法来控制 DOM 父节点中渲染 HTML 的位置，而无需求助于全局空间或将其分成两部分。

使用场景

与 Vue 组件一起使用

如果<teleport>包含Vue组件，它仍然是父组件的逻辑子组件<teleport>：

const app = Vue.createApp({
  template: `
    <h1>Root instance</h1>
    <parent-component />
  `
})

app.component('parent-component', {
  template: `
    <h2>This is a parent component</h2>
    <teleport to="#endofbody">
      <child-component name="John" />
    </teleport>
  `
})

app.component('child-component', {
  props: ['name'],
  template: `
    <div>Hello, {{ name }}</div>
  `
})

在这种情况下，即使 child-component 在不同的位置渲染，它仍然是令牌 parent-component 的子级，并从中获取 name 道具。

这也意味着从父组件添加将按预期工作，并且子组件将嵌入 Vue Devtools 父组件下，而不是放置在实际内容所在的位置。

在同一目的地使用多个传送

一个常见的用例场景是可重用的<Modal>组件，可以同时激活多个实例。在这种情况下，多个 <teleport> 组件可以将其内容附加到同一目标元素。顺序是简单附件 - 后续附件是在目标元素的先前附件之后进行的。

<teleport to="#modals">
  <div>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>

<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</div>

继续。。。。。

下一节：在Vue 3中，组件现在正式支持多根节点组件，或者片段！