如何快速入门VUE3.0：进入学习
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
(资料图)
异步组件
在一些大型的Vue应用中，不管是为了代码的抽离，还是逻辑的划分，不可避免的会将应用分割成一些很小的代码块，形成我们意识上的组件，在需要的地方可以进行 import引入，例如下面：
import MyComponent from "../components/my-component.vue" new Vue({ // ... components: {MyComponent} })这种方式引入，MyComponent在构建的过程中，会被同步打入页面的bundle.js中
这个时候，在某些场景中，比如：
那么我们在构建的过程中，就将组件代码打入页面js中，显然是不合适的
Vue提供了一种异步组件的概念：只在需要的时候才从服务器加载
我们可以这么定义：
Vue.component("async-example", function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: "I am async!" }) }, 1000) })上面的例子，采用 setTimeout模拟异步获取组件，真实情况，甚至可以通过ajax请求组件编译之后的template，然后调用 resolve方法；如果加载失败，可以调用 reject方法
大部分情况下，我们的组件都是单独分割成一个 .vue文件，那么我们可以这么做：
Vue.component("async-webpack-example", function (resolve) { require(["./my-async-component"], resolve) })这个特殊的 require语法将会告诉 webpack，自动将你的构建代码切割成多个包，这些包会通过 Ajax 请求加载
那么如果你的页面没有用到这个组件，自然就不会请求组件的js包
当然，也可以局部注册异步组件
new Vue({ // ... components: { "my-component": () => import("./my-async-component") } })动态组件
说到异步组件，很多人就会想到另一个类似的 动态组件，并且总是会弄混两者的关系。
其实 动态组件和 异步组件完全不是一码事！！！
直接上总结
动态组件：是Vue中一个特殊的Html元素：is属性，属性值可以是 已注册组件的名称或 一个组件的选项对象，它是用于不同组件之间进行动态切换的。
异步组件：简单来说是一个概念，一个可以让组件异步加载的方式；它一般会用于性能优化，比如减小首屏加载时间、加载资源大小。
（学习视频分享：web前端入门、vue视频教程）
以上就是vue中异步组件和动态组件的区别是什么的详细内容，更多请关注php中文网其它相关文章！
