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

值得注意的新特性

Vue 3 中需要关注的一些新功能包括：

1. 组合式 API

2. Teleport

3. 片段

4. 触发组件选项

5. [createRenderer API 来自 @vue/runtime-core

   ](github.com/vuejs/vue-n…%E5%88%9B%E5%BB%BA%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93%E5%99%A8)

6. [单文件组件组合式 API 语法糖 (<script setup>)

   ](github.com/vuejs/rfcs/…%E5%AE%9E%E9%AA%8C%E6%80%A7)

7. [单文件组件状态驱动的 CSS 变量 (<style vars>)

   ](github.com/vuejs/rfcs/…%E5%AE%9E%E9%AA%8C%E6%80%A7)

8. 单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则

片段

片段：即多根节点组件！

在 2.x 中，不支持多根组件，当用户意外创建多根组件时会发出警告，因此，为了修复此错误，许多组件被包装在一个 <div> 中。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

在 3.x 中，组件现在可以有多个根节点！但是，这确实要求开发者明确定义属性应该分布在哪里。

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>