文章目录
-
一、动态引入组件
- 1.具体写法
-
二、动态引入js文件
- 1.具体写法
- 总结
一、动态引入组件
defineAsyncComponent( )
定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent 方法来实现此功能：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...从服务器获取组件
resolve(/* 获取到的组件 */)
})
})
// ... 像使用其他一般组件一样使用 `AsyncComp`
在以上案例中我们可以利用异步加载组件这个方法从而达到动态加载组件的目的，例如在某个单击事件结束之后加载相应的组件.
具体写法：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
import('./components/MyComponent.vue')
)
二、动态加载JS文件
1.这样做的原因？
有些小伙伴一定会有疑问，明明我可以直接引入，为什么还要动态引入呢？能够解决什么问题呢？ 其实，所谓的动态加载就像“按需加载”，这样在需要的时候才会调用相应的文件，会从一定程度上提升应用的性能。文章来源：https://www.toymoban.com/news/detail-531549.html
例如在一个点击事件中加载相应的JS文件文章来源地址https://www.toymoban.com/news/detail-531549.html
2.具体写法
// 1.async await 的方式
const addJs = async ( )=>{
await import ('xxx.js')
}到了这里，关于Vue3 —— 在vue中动态引入组件以及动态引入js的方法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
