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上

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;
}

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”的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器

原文地址：https://blog.csdn.net/yy8623977/article/details/133242778

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！