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

发布于:2024-11-29 ⋅ 阅读:(23) ⋅ 点赞:(0)

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>
  1. 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>
  1. 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下
  • 点击关闭弹窗,弹窗正常关闭
    Teleport移动标签效果

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>
  1. 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组件还未加载好,就会显示稍等,加载中
    Suspense标签效果

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上

Vue2全局API(Vue) Vue3实例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

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;
}
  1. 移除keyCode作为v-on的修饰符,同时也不再支持config.keyCodes
  2. 移除v-on.native修饰符

父组件中绑定事件

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

子组件中声明自定义事件

<script>
  export default {
    emits: ['close']
  }
</script>
  1. 移除过滤器(filter)

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