相比vue2,vue3性能提升了、源码升级了等
1、TypeScript
Vue3可以更好的支持TypeScript(TypeScript还是需要学习一下的)
2、新的特性 Composition API(组合API)
Composition API的优势:
学习笔记:
3、新的内置组件
1)Fragment:组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
2)Teleport:是一种能够将我们的组件html结构移动到指定位置的技术
<teleport to="移动位置"></teleport>
<teleport to="移动位置">
<div v-if="isShow" class="mask">
<div class="dialog">
<h3>我是一个弹窗</h3>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport>
3)Suspense
等待异步组件时渲染一些额外内容,让应用有更好的用户体验。
异步引入组件:
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
使用Suspense
包裹组件,并配置好default
与 fallback
<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template v-slot:default>
<Child/>
</template>
<template v-slot:fallback>
<h3>加载中.....</h3>
</template>
</Suspense>
</div>
</template>