Vue3 值得注意的新特性

Vue3 新特性介绍

• 片段
• 组合式 API
• 单文件组件组合式 API 语法糖 (<script setup>)
• Teleport
• Suspense 实验性
• SFC <style scoped> 现在可以包含全局规则或只针对插槽内容的规则
• 单文件组件状态驱动的 CSS 变量 (<style> 中的 v-bind)

片段 Fragment

vue3 允许我们支持多个根节点

<template>
  <h1>Hello Vue3</h1>
  <h2>Great</h2>
</template>

问题小结:

• Vue2 中书写多个根节点会怎样，如何解决?

全局规则或只针对插槽内容的规则

<style scoped>
/* 深度选择器 */
::v-deep(.foo) {}
/* 简写 */
:deep(.foo) {}

/* 针对槽内容 */
::v-slotted(.foo) {}
/* 简写 */
:slotted(.foo) {}

/* 全局规则 */
::v-global(.foo) {}
/* 简写 */
:global(.foo) {}
</style>