系列文章目录

Vue3 —— 创建 Vue3.0 工程

Vue3 —— 常用 Composition API（零）（setup函数、ref函数、reactive函数、响应式、reactive对比ref）

Vue3 —— 常用 Composition API（一）（computed函数、watch函数、watchEffect函数、生命周期钩子）

Vue3 —— 常用 Composition API（二）（hook 函数、toRef 和 toRefs）

Vue3 —— 其他 Composition API（shallowReactive、shallowRef、readonly、shallowReadonly、toRaw、markRaw…）

Vue3 —— 新的组件及一些改变（Fragment、Teleport、Suspense、其他的改变）

---

---

Fragment（无需配置）

区别及好处

在 vue2 中：组件必须有一个根标签

在 vue3 中：组件可以没有根标签，内部会将多个标签包含在一个 Fragment 虚拟元素中

好处：减少标签层级，减少内存占用

Teleport

什么是 Teleport ？

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

实例

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 scoped>
	.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

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 scoped>
	.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

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 scoped>
	.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

Dialog.vue

1. to = "body"，把结构放在 body 里面

	<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 scoped>
	.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: greenyellow;
	}
	</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
47
48

实现效果：

Suspense

作用

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

使用步骤

1. 异步引入组件
2. 使用 Suspense 包裹组件，并配置好 default 与 fallback

App.vue

1. import 引入组件
2. 用 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>
	
	<script>
	import { defineAsyncComponent } from "vue";
	const Child = defineAsyncComponent(() => import("./components/Child")); //异步引入
	export default {
	  name: "App",
	  components: { Child },
	};
	</script>
	
	<style scoped>
	.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

Child.vue

用 Suspense 和异步组件配合，也可以在 setup 里返回一个 Promise 实例

	<template>
	  <div class="child">
	    <h3>我是Child组件</h3>
	    {{sum}}
	  </div>
	</template>
	
	<script>
	import {ref} from 'vue'
	export default {
	    name: "Child",
	    setup(){
	      let sum = ref(200)
	      return new Promise((resolve)=>{
	        setTimeout(()=>{
	          resolve({sum})
	        },1000)
	      })
	    }
	};
	</script>
	
	<style scoped>
	.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

效果如下：

全局 API 的转移

其他改变

1. data 选项应始终被声明为一个函数
2. 过渡类名的更改 v-enter ==> v-enter-to
3. 移除 keyCode 作为 v-on 的修饰符，同时也不再支持 config.keyCodes
4. 移除 v-on.native 修饰符

父组件中绑定事件

	<my-component v-on:click="xxx">
1

子组件中声明自定义事件

	export default{
	    emits: ['click']
	}
1
2
3

5. 移除过滤器（filter）

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路，持续更新中…