极速上手 VUE 3——teleport传送门组件

第一个挂载元素

第二个挂载元素

运行结果如图：

上边的实例等价于：

第一个挂载元素

第二个挂载元素

二、为什么使用 teleport

---

使用 vue 开发时，都是多个组件之间不断地嵌套，处理元素的样式或者层级的时候就会变得困难。如我们需要添加一个 modal 模态框或 toast 提示框，如果我们把这样的框可以从 vue 组件中剥离出来，我们样式和层级设置起来会更加简便。

有些同学会想，这直接放到 index.html 中不就好了吗？另外 modal 、toast 元素需要使用 vue 组件的状态值，通过状态控制 modal、toast 的隐藏显示。如果直接放入 index.html 则状态控制就复杂了。

所以 teleport 传送门组件就派上用场了。有点像“哆啦A梦”的任意门，可以把元素传送到任意的元素内。同时还可以使用 vue 组件内的状态值控制它。

三、teleport 应用

---

使用 vite + vue 3 创建的项目，具体如何创建项目请查看**《什么，你还使用 webpack？别人都在用 vite 搭建项目了》**文章。

vue 3 的项目创建完成之后，找到 index.htm 文件，添加：

组件文件内，添加 teleport 组件：

<button @click=“showModal” class=“btn”>打开 modal

我是一个 Modal 框

运行结果，我们发现使用的 teleport 组件，通过 to 属性，将内容传送到

内，该元素与

同级。此时 teleport 中的元素隐藏显示完全由 vue 组件内的状态值决定。

四、初学者容易遇到的坑

---

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

个有序数组，找出两个数相加为一个目标数
…
[外链图片转存中…(img-veI7Q04q-1714724907448)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666