Vue3【Composition API 的优势、新的组件（Fragment、Teleport、Suspense）、全局API的转移】

---

四、Composition API 的优势

1.Options API 存在的问题

使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改 。

2.Composition API 的优势

我们可以更加优雅的组织我们的代码，函数。让相关功能的代码更加有序的组织在一起。

五、新的组件

1.Fragment

• 在Vue2中: 组件必须有一个根标签
• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
• 好处: 减少标签层级, 减小内存占用

2.Teleport

• 什么是Teleport？—— Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

  
  	
  
  		
  
  			
  我是一个弹窗
  			关闭弹窗
  		
  	
  
  1
  2
  3
  4
  5
  6
  7
  8

用之前效果：



代码实现：

App.vue
<template>
	<div class="app">
		<h3>我是App组件h3>
		<Child/>
	div>
template>

<script>
	import Child from './components/Child'
	export default {
		name:'App',
		components:{Child},
	}
script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Child.vue
<template>
	<div class="child">
		<h3>我是Child组件h3>
		<Son/>
	div>
template>

<script>
	import Son from './Son'
	export default {
		name:'Child',
		components:{Son},
	}
script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Son.vue
<template>
	<div class="son">
		<h3>我是Son组件h3>
		<Dialog/>
	div>
template>

<script>
	import Dialog from './Dialog.vue'
	export default {
		name:'Son',
		components:{Dialog}
	}
script>

<style>
	.son{
		background-color: orange;
		padding: 10px;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

Dialog.vue
<template>
	<div>
		<button @click="isShow = true">点我弹个窗button>
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一个弹窗h3>
					<h4>一些内容h4>
					<h4>一些内容h4>
					<h4>一些内容h4>
					<button @click="isShow = false">关闭弹窗button>
				div>
			div>
		teleport>
	div>
template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Dialog',
		setup(){
			let isShow = ref(false)
			return {isShow}
		}
	}
script>

<style>
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

用之后效果：

3.Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    1
    2

  • 使用Suspense包裹组件，并配置好default与 fallback

    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

App.vue
<template>
	<div class="app">
		<h3>我是App组件h3>
		<Suspense>
			<template v-slot:default>
				<Child/>
			template>
			<template v-slot:fallback>
				<h3>稍等，加载中...h3>
			template>
		Suspense>
	div>
template>

<script>
	// import Child from './components/Child'//静态引入，组件同时出现。只要没有成功，就不渲染
	import {defineAsyncComponent} from 'vue' 
	const Child = defineAsyncComponent(()=>import('./components/Child')) //异步引入，App先出，Child后出。Suspense可解决显示效果不好，添加插槽
	export default {
		name:'App',
		components:{Child},
	}
script>

<style>
	.app{
		background-color: gray;
		padding: 10px;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Child.vue
<template>
	<div class="child">
		<h3>我是Child组件h3>
		{{sum}}
	div>
template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve({sum})
				},3000)
			})
			return await p
		}
	}
script>

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

六、其他

1.全局API的转移

• Vue 2.x 有许多全局 API 和配置。

  • 例如：注册全局组件、注册全局指令等。

    //注册全局组件
    Vue.component('MyButton', {
      data: () => ({
        count: 0
      }),
      template: 'Clicked {{ count }} times.'
    })
    
    //注册全局指令
    Vue.directive('focus', {
      inserted: el => el.focus()
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12

• Vue3.0中对这些API做出了调整：

  • 将全局的API，即：Vue.xxx调整到应用实例（app）上

    2.x 全局 API（Vue）	3.x 实例 API (app)
    Vue.config.xxxx	app.config.xxxx
    Vue.config.productionTip	移除
    Vue.component	app.component
    Vue.directive	app.directive
    Vue.mixin	app.mixin
    Vue.use	app.use
    Vue.prototype	app.config.globalProperties

2.其他改变

• data选项应始终被声明为一个函数。

• 过度类名的更改：

  • Vue2.x写法

    .v-enter,
    .v-leave-to {
      opacity: 0;
    }
    .v-leave,
    .v-enter-to {
      opacity: 1;
    }
    1
    2
    3
    4
    5
    6
    7
    8

  • Vue3.x写法

    .v-enter-from,
    .v-leave-to {
      opacity: 0;
    }
    
    .v-leave-from,
    .v-enter-to {
      opacity: 1;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9

• 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

• 移除v-on.native修饰符

  • 父组件中绑定事件

    
    1
    2
    3
    4

  • 子组件中声明自定义事件

    
    1
    2
    3
    4
    5

• 移除过滤器（filter）

  过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

• …