Vue3新特性体验--下（各式各样API，完结篇），前端进程保活黑科技实现原理解密及方法

import mitt from ‘mitt’

const emitter = mitt();

export default emitter;

开始使用mitt.js

Child.vue

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

HelloWorld.vue

我是vue3项目

我是HelloWorld组件

{{msg}}

点击按钮，实现Child向HelloWorld发消息

注意：与provide和inject注意点一致，触发和监听的字段需一致，才能达到指定的通信效果，如该例中的“fromChild”。

既然跨层级组件之间能使用这两种方式，父子组件当然也可以使用。

Teleport

提供一种方法，可以让一个模板插入到该组价或者父组件外的html标签（很可能是body）里面，可以称它为穿梭门。

未使用teleport时：

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

Child未使用teleport

看下页面元素结构

试着使用teleport，穿梭到body

我是Child组件

{{msg}}

<button @click=“changeMsg”>发送消息

Child使用teleport

Suspense

官网对其解释

我们有时候想在加载异步组件时渲染一些后备内容（比如loading等），就可以使用suspense，让我们可以优化用户体验。

首先，对Child.vue进行修改，模拟异步加载组件

我是Child组件

{{msg}}

然后修改父组件B.vue，使用Suspense，其有两个插槽，它们都只接收一个直接子节点，default插槽里的节点会尽可能展示出来。如果不能，则展示fallback插槽里的节点。

我是B组件

正在加载，请稍后…

B组件在加载时，因为Child为异步组件，因此这个时候suspense插槽default无法展示，此时先展示fallback里面的内容。

模拟两秒后（setTimeout） ，Child组件加载完毕，则suspense显示插槽default中的内容。

重要的是，异步组件不需要作为suspense的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和suspense自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。如下，当Child加载完毕，“显示完成”才一起出现。

我是B组件

显示完成

正在加载，请稍后…

将 <suspense> 跟  和  组件相结合是常见的情形。这些组件的嵌套顺序对于它们的正确工作很重要。更多详细内容请参考官方文档：

Suspense | Vue.jshttps://v3.cn.vuejs.org/guide/migration/suspense.htmlv-model 与 v-bind.sync

v-model | Vue.js

语法糖script setup

尽管现在setup使用起来比较方便，但是可以发现一些地方，组件都已经引入了还需要注册，而且当一个组件的数据和方法过多时，需要return很多行，代码量可能会很多。Vue3提供一个语法糖script setup，即在script加入setup，可以不用return，template也可以获取到。

将HelloWorld.vue改成script setup的形式

修改前：

修改后代码量少了许多：

我是vue3项目

我是HelloWorld组件

{{msg}}

验证页面显示正常，无警告，无报错。

但是没有了setup函数，那么props，emit，attrs该如何获取呢，就要介绍一下新的语法了。setup script语法糖提供了三个新的API来供我们使用：defineProps、defineEmits和useContext。

defineProps：用来接收父组件传来的值props。

defineEmits：用来声明触发的事件表。

useContext：用来获取组件上下文context。

HelloWorld.vue

我是vue3项目

<B msg=“props传递的消息” @changeB=“handleClick”/>

我是HelloWorld组件

{{msg}}

B.vue

我是B组件

显示完成

{{props.msg}}

<button @click=“changeB”>emit

正在加载，请稍后…

刷新页面显示，defineProps使用成功。

点击按钮，alert弹窗，defineEmits使用成功。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

}

刷新页面显示，defineProps使用成功。

点击按钮，alert弹窗，defineEmits使用成功。

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-tjiobHrA-1727194229687)]