一、动态组件

动态切换组件
代码如下（示例）：

<template><ul><li v-for="(item,index) in list" :key="index" @click="change(index)">{{item.name}}</li></ul><keep-alive><component :is="currentComponent.com"></component></keep-alive>
</template><script setup>
import CommonC from '../components/CommonC.vue'
import CommonB from '../components/CommonB.vue'
import CommonA from '../components/CommonA.vue'let list = reactive([{name:"切到A",com:markRaw(CommonA)},{name:"切到B",com:markRaw(CommonB)},{name:"切到C",com:markRaw(CommonC)}
])let currentComponent = reactive({com:list[0].com
})
const change=(idx)=>{currentComponent.com = list[idx].com
}
</script>

1.markRaw

标记一个普通对象，使得它不可以被转换成响应式对象。简单来说，就是组件不需要响应式，这样可以提高性能。

2.keep-alive

组件在非活动状态，依旧保持组件的实例。即组件被切换时，状态不会被重置。
当一个组件实例从 DOM 中移除但它是由缓存的组件树的一部分时keepalive，它会进入停用状态而不是被卸载。当组件实例作为缓存树的一部分插入 DOM 时，它会被激活。
保持活动状态的组件可以使用onActivated()和为这两种状态注册生命周期钩子onDeactivated()

二、异步组件

1.使用官方提供的defineAsyncComponent（）函数

代码如下（示例）：

<template><common-a></common-a><common-b></common-b><div>//C组件为图片资源<common-c></common-c></div>
</template><script setup>
import CommonB from '../components/CommonB.vue'
import CommonA from '../components/CommonA.vue'const CommonC = defineAsyncComponent(() =>import('../components/CommonC.vue')
)
</script>

我们可以看到视口还没加载到img就直接加载出来了。

2.使用插件vueuse

代码如下（示例）：

<template><common-a></common-a><common-b></common-b><div ref="target"><common-c v-if="targetIsVisible"></common-c></div>
</template><script setup>
import { useIntersectionObserver } from '@vueuse/core'
// import CommonC from '../components/CommonC.vue'
import CommonB from '../components/CommonB.vue'
import CommonA from '../components/CommonA.vue'const CommonC = defineAsyncComponent(() =>import('../components/CommonC.vue')
)
const target = ref(null)
const targetIsVisible = ref(false)const { stop } = useIntersectionObserver(target,([{ isIntersecting }], observerElement) => {console.log(isIntersecting);if(isIntersecting){targetIsVisible.value = isIntersecting}},)
</script>

isIntersecting 可以判断组件是否出现在视口，初始值为false，当组件出现在视口就会加载其组件。

异步组件在不使用插件的情况下，他会按需加载组件需要的js文件

Vue3动态组件/异步组件相关推荐

Vue动态组件异步组件 keep-alive
动态组件指的是动态切换组件的显示与隐藏每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理 &l ...
Vue.js 动态组件异步组件
在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabCompon ...
Webpack的代码分包Vue3中定义异步组件分包refs的使用
一.默认的打包过程: 默认情况下,在构建整个组件树的过程中,因为组件和组件之间是通过模块化直接依赖的,那么webpack在打包时就会将组件模块打包到一起(比如一个app.js文件中): 这个时候随着项 ...
vue3 动态加载组件、动态引入组件
1.问题在做一个用vite构建的vue3项目时,动态拉取导入.vue页面,然后控制台一直有以下提示,页面也无法渲染出来. 2.分析根据上面的报错提示,让我们安装并使用:@rollup/plugin ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件
前言本笔记主要基于官方文档<迁移策略--异步组件>汇总而来.如有理解出入,请以官方文档为主.建议您以官方文档为主,本文为辅.这样您可以"以自己为主"审视的阅读,从而不 ...
踩坑记15 动态路由 router.options.routes未更新 | vue升级 element-plus未适配vue3.2.x | vite glob导入动态加载组件，不能使用别名alias
2021.8.12 坑50(vue-router4.addRoute().router.options.routes未更新):进行动态权限获取菜单的设置,使用了addRoute()来添加路由,但是ro ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...

Vue3动态组件/异步组件

文章目录