vue3-传送 异步组件

teleport

传送到body中

1. 橙色框

---

传送到某个div中

1. 无论是类名还是id名,都是类似css选择器的写法

---

传送的顺序问题

1. 只能向比当前dom(组件)先挂载的dom传递

---

传送的应用场景

1. 现在就是在悬浮窗里面我点击右上角的放大按钮可以放大图片

2. 但是这个图片的放大只能局限在这个悬浮穿内

3. 实际上期望这个放大能够全屏显示,这个时候我们想到可以使用绝对定位,然后上下左右都为0,但是因为这个组件肯定嵌套了许多组件,然后只要有一个父组件使用了相对定位,那么这个就会受到影响,然后就不能全屏显示

4. 现在使用teleport,可以直接将这个dom传到到body里面,然后在使用绝对定位,此时就是可以全屏显示

---

动态组件

动态组件以前的写法

1. 导入三个组件

2. 然后三个组件都是写上去

3. 然后使用v-if来控制要显示哪个组件

---

动态组件

1. 红色框的内容会根据currentComponent.com的内容来决定当前显示哪个组件

2. 从而实现一个组件代表做个组件

3. 原来是三个组件都写上然后v-if控制显示,现在只要写一个组件就是可以了.

---

markRaw的使用

---

异步组件

异步组件的导入方式

1. 13-15行就是异步组件的导入方式

---

vueuse检测某个元素是否可见

---

useIntersectionObserver的使用

1. 组件C外面的div元素用target表示

2. 然后useIntersectionObserver()这个函数检测个target是否出现

3. 当出现将targetIsVisible设置为true,然后C组件就会显示出来,从而一个组件的异步加载

---

异步组件的使用场景

1. 组件按需引入

---

组件中异步请求

1. suspend包裹

2. fallback的内容加载中显示

3. default的内容加载完成显示

---