Vue3的Composition组合式API(Teleport移动标签、Suspense标签)、Vue3相对Vue2的改变(全局API的转移、其它改变)

1. Teleport移动标签

一种能够将我们的组件html结构移动到指定位置的标签

使用示例

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

2. Child.vue

<template>
	<div class="child">
		<h3>我是Child组件</h3>
    <Dialog/>
	</div>
</template>

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

<style>
	.child{
		background-color: skyblue;
		padding: 10px;
	}
</style>

3. Dialog.vue

• <teleport to="body">中的to可以是html标签，或选择器(如id选择器: #app)
• css的mark是一个半透明的遮罩层会遮住整个body
• css的dialog让弹窗位于body正中央

<template>
	<div>
		<button @click="isShow = true">点我弹个窗</button>
    <!-- to可以是html标签，或选择器(如id选择器: #app) -->
		<teleport to="body">
			<div v-if="isShow" class="mask">
				<div class="dialog">
					<h3>我是一个弹窗</h3>
					<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>
  /* 半透明的遮罩层会遮住整个body*/
	.mask{
		position: absolute;
		top: 0;bottom: 0;left: 0;right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
  /* 弹窗位于body正中央 */
	.dialog{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		text-align: center;
		width: 300px;
		height: 300px;
		background-color: green;
	}
</style>

效果如下：

• 弹窗如果放在Son组件，会影响App组件、Child组件、Son组件的布局，而且弹窗在Son组件做定位也不好做
• 点我弹出弹窗，出现半遮罩层遮住了body，body其它位置都不能点。并且出现的弹窗位于body正中央
• 查看html结构，可以看到弹窗的div位于body下
• 点击关闭弹窗，弹窗正常关闭
  

2. Suspense标签

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

使用示例：

1. Child.vue
   • 当使用了defineAsyncComponent异步引入，就可以使用async + Promise + await异步返回数据
   • Promise中模拟延迟了3秒返回数据
   • 也可以不使用async + await，直接返回Promise

<template>
	<div class="child">
		<h3>我是Child组件</h3>
		<h3>sum的值是: {{sum}}</h3>
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default {
		name:'Child',
		// 当使用了defineAsyncComponent异步引入，就可以使用async + Promise + await异步返回数据
		// Promise中模拟延迟了3秒返回数据
		// 也可以不使用async + await，直接返回Promise
		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>

2. App.vue
   • 使用defineAsyncComponent异步引入组件
   • 使用Suspense包裹组件，并配置好default与fallback。Child组件未加载好时，会先显示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>
	.app{
		background-color: gray;
		padding: 10px;
	}
</style>

效果如下：

• 情况1：将网络模式设置为慢的3G，这时Child组件还未加载好，就会显示稍等，加载中
• 情况2：使用Promise模拟异步延迟返回数据，这时Child组件还未加载好，就会显示稍等，加载中
  

3. Vue3相对Vue2的其它改变

3.1 全局API的转移

Vue2有许多全局API和配置。例如：注册全局组件、注册全局指令等，如下所示：

// 注册全局组件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

// 注册全局指令
Vue.directive('focus', {
  inserted: el => el.focus()
}

Vue3对这些API做出了调整。将全局的API，即：Vue.xxx调整到应用实例app上

3.2 其他改变

1. data选项应始终被声明为一个函数
2. 动画过度类名的更改：

Vue2写法

.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3写法

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

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

父组件中绑定事件

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

子组件中声明自定义事件

<script>
  export default {
    emits: ['close']
  }
</script>

5. 移除过滤器(filter)

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