位置: IT常识 - 正文
vue3中实现异步组件(vue解决异步取值问题)
编辑：rootadminvue3中实现异步组件 
本文链接地址:https://www.jiuchutong.com/zhishi/297389.html
转载请保留说明！
推荐整理分享vue3中实现异步组件(vue解决异步取值问题)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue异步调用方法,vue3 异步组件,vue如何实现异步加载,vue异步调用方法,vue3 异步组件,vue异步是什么意思,vue异步是什么意思,vue异步是什么意思,内容如对您有帮助，希望把文章链接给更多的朋友！
使用场景一：当组件进入视窗时再进行加载
假设页面中有三个组件A、B、C
C组件中有一张图片
<template> <div class="A"> <A></A> </div> <div class="B"> <B></B> </div> <div> <C></C> </div></template><script setup>import A from './components/A.vue'import B from './components/B.vue'import C from './components/C.vue'</script>打开页面：
如果一个页面中的内容非常多，用户再首次打开时并没有浏览到下方的内容，但页面必须加载完下方的内容才会显示，这无疑非常影响性能
接下来我们做一些调整
defineAsyncComponent创建一个只有在需要时才会加载的异步组件。
defineAsyncComponent是vue3提供的内置api。用于异步加载组件
但是仅靠这个api并不能完成我们所需要的功能
这里我们还需要借助vueUse中的一个api
首先我们需要安装一下vueUse的依赖
npm i @vueuse/core
我们需要使用vueUse中的useIntersectionObserver
安装完成后来修改一下我们的代码：
<template> <div class="A"> <A></A> </div> <div class="B"> <B></B> </div> <div ref="target"> <C v-if="targetIsVisible"></C> </div></template><script setup>import A from './components/A.vue'import B from './components/B.vue'import { defineAsyncComponent, ref } from 'vue';import { useIntersectionObserver } from '@vueuse/core'const C = defineAsyncComponent(() => //异步引入组件 import('./components/C.vue'))const target = ref(null) //获取需要操作的dom元素const targetIsVisible = ref(false) //定义一个dom元素显示与隐藏开关const { stop } = useIntersectionObserver( //定义一个函数用于控制 target, ([{ isIntersecting }]) => { //这里的isIntersecting表示的是dom元素是否进入视窗，值为true或flase console.log(isIntersecting); if (isIntersecting) { targetIsVisible.value = isIntersecting //将isIntersecting赋值给开关，即表示进入视窗就显示该dom元素 } },)</script>
这样就实现了异步加载C组件，在页面视窗滚动到C组件时才会加载C组件。
上一篇：使用python中的pymrmr模块来进行特征提取，深入学习mRMR（最大相关最小冗余准则）(python pymongo)
下一篇：登录页面的实现及跳转（vue-router）(登录页面的实现方式)
