Vue3 值得注意的新特性

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>

• 🚨注意：>>> 和/deep/ 已经被弃用，不推荐使用。

状态驱动的动态 CSS

<script setup>
const theme = {
  color: 'red'
}
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>

组合式 API

https://v3.cn.vuejs.org/guide/composition-api-introduction.html

• 传统方式使用 (data、computed、methods、watch) 组件选项来组织逻辑通常都很有效。

• 然而，当我们的组件开始变得更大时，逻辑关注点的列表也会增长，最终会导致组件难以阅读和理解。

• 这是一个大型组件的示例，其中逻辑关注点按颜色进行分组。

• 在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

• 组合式 API 能够将同一个逻辑关注点相关代码收集在一起。

问题小结:

• 组合式 API 的优势是什么 ?