Vue3 —— 在vue中动态引入组件以及动态引入js的方法

文章目录

• 一、动态引入组件
  • 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.这样做的原因？

有些小伙伴一定会有疑问，明明我可以直接引入，为什么还要动态引入呢？能够解决什么问题呢？  其实，所谓的动态加载就像“按需加载”，这样在需要的时候才会调用相应的文件，会从一定程度上提升应用的性能。

例如在一个点击事件中加载相应的JS文件

   2.具体写法   

// 1.async await  的方式
 
const addJs = async ( )=>{
  await import ('xxx.js')
}复制