2024年前端最全Vue3新特性体验--下（各式各样API，完结篇）(1)，android快手面试

本文链接：https://blog.csdn.net/2401_84616922/article/details/138761626

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

return {

}

Child.vue

我是Child组件

页面效果，正常展示

注意：inject获取到对应的provide，则第一个字段值必须一致，如该例中的“fromHW”。

这时候Child已经拿到HelloWorld中传递下来的消息，那么反过来呢，Child向HelloWorld传递消息在Vue2中，一种常用方式是事件总线Bus实现跨组件通信

Vue组件间的通信方式（多种场景，通俗易懂，建议收藏）_前端菜小白leo的博客-CSDN博客

但是在Vue3中移除了 $o n 、$ off、$once，导致无法使用Bus，但是官方推荐的另外一种取代方案，原理跟Bus一样，那就是mitt.js。

mitt.js

安装mitt

npm i mitt -s

新建mitt.js

import mitt from ‘mitt’

const emitter = mitt();

export default emitter;

开始使用mitt.js

Child.vue

我是Child组件

<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项目
#### 算法刷题
大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

疯狂编程

学习效果可视化

写博客

阅读优秀代码

心态调整

rld’,

setup () {

let msg = ref(‘’)

provide(‘fromHW’,‘HelloWorld的消息’) //向下传递

emitter.on(‘fromChild’,val => { //监听事件

msg.value = val

})

return {

msg

}

}

}

修改后代码量少了许多：

我是vue3项目
#### 算法刷题
大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

疯狂编程

学习效果可视化

写博客

阅读优秀代码

心态调整