{ msg: 'Second Product', price: 19.99 },
{ msg: 'Third Product', price: 15.00 },
{ msg: 'Fancy Shirt', price: 137.00 },
{ msg: 'More Fancy', price: 109.99 },
{ msg: 'Extreme', price: 3.00 },
{ msg: 'Super Shirt', price: 109.99 },
{ msg: 'Epic Shirt', price: 3.00 },
] })
}
</script>
在这里，我们将接收一个
shoppingList 并把他输出到屏幕上。您可以使用该
npm run serve 命令运行该应用程序。然后导航到
http：// localhost：8080 。如果一切按计划进行，你应该会看到如下图所示的内容。
可以尝试打开在
network 选项卡,点击Checkout按钮，可以发现
network 里将异步加载
结账组件 。您还可以在GitHub上查看此演示的代码 。
为异步组件添加加载中和加载错误组件
有时异步组件加载过长或加载时。显示加载动画或错误信息可能很有用，但要支持这会再次降低应用程序的速度。异步组件应该小而且加载速度快。这是一个例子：
const Message = () => ({
component: import("./Message"),
loading: LoadingAnimation,
error: ErrorComponent
});总结
创建和实现异步组件非常简单，应该成为标准开发例程的一部分。从用户体验的角度来看，尽可能减少初始加载时间以保持用户的注意力是非常重要。希望本教程可以帮助您构建异步加载组件。
