Vue 3 | 重新“定义”异步组件

最新推荐文章于 2024-04-20 10:43:52 发布
最新推荐文章于 2024-04-20 10:43:52 发布
阅读量2.3k 收藏 6
点赞数 1
文章标签： css html javascript less js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39841838/article/details/109326857
版权

开门见山 

依照惯例，首先从上帝视角看一下异步组件发生了什么改变：

  • 新增了一个方法：defineAsyncComponent，用来显式地定义异步组件

  • component 选项改名：loader

  • Loader 函数不再接受 resolve 和 reject 作为参数，并且必须返回一个 Promise

曾经的异步组件 

最低0.47元/天 解锁文章
A312jids93
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
简单的Vue异步组件实例Demo
01-19
前言 在大型应用中，我们可能需要将应用拆分为多个小模块，按需从服务器下载。为了进一步简化，Vue.js 允许将组件定义为一个工厂函数，异步地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。 为什么需要异步组件，道理和webpack的按需加载是一样的，如果一开始就加载所有的组件，那么是比较耗时的，所以我们可以将一些组件定义为异步组件，在需要使用的时候再进行加载。 所以好处的话就显而易见了 ： 按需加载，可以节省首次加载的时间，提高速度，也算是一个性能优化。 那么一个组件可能会被使用多次，按需加载的话也不会加载多次，第一次加载完成就会
vue3.0 Suspense悬挂异步组件、定义异步组件
weixin_43294560的博客
04-10 832
1、导入异步组件 方式一: 若组件setup返回的是一个Promise对象,则该组件默认为异步组件,导入时使用defineAsyncComponent异步导入/import同步导入都行 方式二: 手动定义异步组件并导入 defineAsyncComponent(()=> import('./components/HelloWorld.vue')) 2、使用Suspense悬挂,当异步组件加载完成时,将展示设置的同步内容 <Suspense> &lt
Vue3中如何进行异步组件的加载？
最新发布
有我更精彩的博客
04-20 652
函数，我们可以在Vue3中实现异步组件的加载，从而提高应用程序的性能和加载速度。异步组件加载可以根据需要按需加载组件，减少初始加载时间，提高用户体验。通过按需加载组件，可以减少初始加载时间，并在需要的时候才加载相应的组件，从而提高用户体验。Vue.js作为一款流行的前端框架，其最新版本Vue3中引入了许多新的特性和改进，其中包括异步组件的加载。在本篇博客中，我将详细介绍Vue3中如何进行异步组件的加载，并提供示例代码帮助理解。函数来定义异步加载的组件。属性中，我们指定了在组件加载过程中显示的加载中组件。
Vue 3.0 异步组件
2201_75866484的博客
03-16 433
以下是对变化的高层次概述：如需更深入的解释，请继续阅读！以前，异步组件是通过将组件定义为返回 Promise 的函数来创建的，例如： 或者，对于带有选项的更高阶的组件语法： 现在，在 Vue 3 中，由于函数式组件被定义为纯函数，因此异步组件的定义需要通过将其包装在新的 助手方法中来显式地定义： 对 2.x 所做的另一个更改是， 选项现在被重命名为 ，以便准确地传达不能直
Vue3 源码阅读（11）：组件化 —— 异步组件
f18855666661的博客
08-26 1423
异步组件的实现主要借助了组件的 setup 选项，当 setup 函数的返回值是一个函数时，这个返回的函数就会作为异步组件的 render 函数。
Vuejs（15）——Vue的异步组件
热门推荐
qq20004604的博客
02-22 1万+
Vue的异步组件使用说明
Vue3——第十章（异步组件：defineAsyncComponent）
why404
01-11 8143
Vue3——第十章（异步组件：defineAsyncComponent）
vue3中实现异步组件
MMccGrady的博客
02-20 3835
使用场景一：当组件进入视窗时再进行加载假设页面中有三个组件A、B、CC组件中有一张图片打开页面：如果一个页面中的内容非常多，用户再首次打开时并没有浏览到下方的内容，但页面必须加载完下方的内容才会显示，这无疑非常影响性能接下来我们做一些调整。
vue3中的异步组件
九仞山的专栏
06-09 6733
详细介绍了vue3中的异步组件及Suspense组件
vue3异步引入组件
qq_42351255的博客
06-15 625
在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。Vue 提供了 defineAsyncComponent如你所见，方法接收一个返回 Promise 的加载函数。这个 Promise 的resolve回调方法应该在从服务器获得组件定义时调用。你也可以调用表明加载失败。也会返回一个 Promise，所以多数情况下我们会将它和搭配使用。最后得到的AsyncComp是一个外层包装过的组件，仅在页面需要它渲染时才会调用加载内部实际组件的函数。
Vue3如何使用异步组件
weixin_47768980的博客
07-28 2875
Vue3的异步组件减少打包体积进行分包
vue+webpack实现异步组件加载的方法
11-29
1.vue文档只给出了Vue.component(‘comp_name’,function(resolve,reject){})在回调里ajax加载组件定义内容的例子，但现在习惯.vue文件写组件，在点击路由获取.vue的时候怎么弄呢？ 2.webpack的coding-split支持...
Vue 同步异步存值取值实现案例
01-21
3.非父子组件或父子组件 更好的方式是在vue中使用vuex 方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。 方法2: 我们定义全局变量。模块a的数据赋值给全局变量x。然后...
Vue2的路由和异步请求
12-09
Vue2的路由和异步请求 路由的作用 代码解析 使用CLI3创建带路由功能的Vue2项目 路由映射定义 异步请求 后端RESTful Web服务和代理 使用 axois 组件请求后端数据 axios的使用 在项目中实现请求
vue3-2个多小时的学习.docx
03-09
包括vue3项目的创建、vue3如何定义数据、vue3里面vueX的结构、vueX里面异步提交mutation、使用vueX里面的数据、vue3的计算属性、vue3路由配置和路由跳转、如何获取路由携带的参数、vue3的生命周期、vue3父子组件间的...
Vue3动态组件/异步组件
weixin_44530344的博客
08-18 1258
当一个组件实例从 DOM 中移除但它是由 缓存的组件树的一部分时keepalive，它会进入停用状态而不是被卸载。当组件实例作为缓存树的一部分插入 DOM 时，它会被激活。isIntersecting 可以判断组件是否出现在视口，初始值为false，当组件出现在视口就会加载其组件。简单来说，就是组件不需要响应式，这样可以提高性能。组件在非活动状态，依旧保持组件的实例。即组件被切换时，状态不会被重置。异步组件在不使用插件的情况下，他会按需加载组件需要的js文件。...
vue3-异步组件
qq_39111074的博客
09-29 155
异步组件实现方法 异步组件- - -父组件调用子组件时，不是马上渲染，根据需要在某时刻进行渲染 如： js代码： Vue实例名.component('组件名', Vue.defineAsyncComponent(() => { return new Promise((resolve, reject) => { setTimeout(() => { resolve({ templa
vue3 AsyncComponents
MM_520131400的博客
04-03 1797
组件异步加载
(三)vue3之Async Components异步组件
weixin_50096821的博客
03-13 2875
1.简介 vue3中的Async Components异步组件使用进行了很大的改动，改动如下： 使用defineAsyncComponent方法来定义async components异步组件 组件配置项的component重新命名为loader loader函数（对应vue2的component函数）不再接受resolve和reject参数，并且必须返回Promise 2.vue2的使用方式 vue2中通过一个返回promise函数来定义async components异步组件： const async
vue3的defineAsyncComponent加载异步组件的详细使用方法
03-30
Vue3的`defineAsyncComponent`函数是用于异步加载组件的，可以让我们在需要时才加载组件，提高网页的性能。下面是使用`defineAsyncComponent`函数加载异步组件的详细步骤： 1. 定义异步组件 在需要异步加载的组件中，我们需要使用`defineAsyncComponent`函数来定义异步组件。例如，假设我们有一个`MyComponent.vue`组件，我们可以这样定义异步组件： ```javascript import { defineAsyncComponent } from 'vue' const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue') ) ``` 这里的`defineAsyncComponent`函数接收一个函数作为参数，该函数返回一个`Promise`对象，用于加载组件。 2. 异步组件的使用 在模板中使用异步组件时，我们可以像使用普通组件一样使用它。例如： ```vue <template> <div> <MyComponent /> </div> </template> <script> import { defineAsyncComponent } from 'vue' const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue') ) export default { components: { MyComponent } } </script> ``` 注意，我们需要将异步组件注册到`components`中，才能在模板中使用它。 3. 异步组件的错误处理 在加载异步组件时，可能会出现错误，例如组件加载超时、网络错误等。为了确保网页的稳定性，我们需要对异步组件的加载错误进行处理。Vue3提供了`Suspense`组件，用于处理异步组件的加载错误。 我们可以在父组件中使用`Suspense`组件，将异步组件包裹起来。例如： ```vue <template> <div> <Suspense> <template #default> <MyComponent /> </template> <template #fallback> <div>Loading...</div> </template> </Suspense> </div> </template> <script> import { defineAsyncComponent, Suspense } from 'vue' const MyComponent = defineAsyncComponent(() => import('./MyComponent.vue') ) export default { components: { MyComponent, Suspense } } </script> ``` 在`Suspense`组件中，我们需要使用`default`插槽来渲染异步组件，使用`fallback`插槽来渲染加载中的提示信息。当异步组件加载失败时，`Suspense`组件会自动渲染`fallback`插槽中的内容。 以上就是使用`defineAsyncComponent`函数加载异步组件的详细步骤。需要注意的是，异步组件的加载会增加网页的请求次数，会对网页性能产生一定的影响。因此，在使用异步组件时，需要平衡性能和代码结构的需求，合理使用异步组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值