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下
• 点击关闭弹窗，弹窗正常关闭
  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，直接返回Promiseasync 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组件还未加载好，就会显示稍等，加载中
  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;
}

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

父组件中绑定事件

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

子组件中声明自定义事件

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

5. 移除过滤器(filter)

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