Why should warn and hint the coder to not use defineAsyncComponent ?
#1469
Comments
|
Because the router needs to load the component during the navigation (lazy loading), so everything would be ignored anyway. If you use a defineAsyncComponent, then the loading isn't part of the navigation. Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂 |
|
Thank you for your reply |
|
这确实是一个问题，defineAsyncComponent 的定义并不是徒劳的，我测试了一下，在不使用 defineAsyncComponent 的情况下，无法很好的添加异步组件加载时候的loading状态，这样我们导航的时候可能会在没有任何交互反馈的情况下让用户不知所措，我也认为这个warning是不应该存在的，看了上面的回答我目前一头雾水，不知道这个解释与问题有什么关联？ |
|
I don't understand your answer to this question. After thinking about it, I find another question is how to add a Loading component to the loading process of asynchronous components without using defineAsyncComponent. |
我看了很多相关的解释，理由都很奇怪，实际也没有解决存在的问题，请问你明白他回复的意思了么？后面是怎么解决这个问题的呢？ |
好问题，其实我至今也不懂 直接用其实我没发现任何问题包括守卫都是正常的 其实他的说法也没说错 事实上这并不是我们想要的真正的页面，只是一个loading的图标或者组件而已，认为它不是一个页面完全没问题（只是一个大一点的组件而已）。 我出现这个问题的原因在于，我开发的时候，异步加载新的页面（也就是今天刚打开这个项目），它需要编译，得等一会儿我很不爽。或者是build上去服务器之后，服务器被第一次访问，访问人感觉点了没反应很不爽。
解决方法一：用 解决方法二：我曾经看过一个人用一个vue页面，用选项式写法，把 defineAsyncComponent 写在 script 中，也就是说，将loading页和实际页面，都当成这个空白页的组件（能理解我意思吗？），空白页面是一瞬间加载完的，所以通过了vue-router的检测 泪目~~ 有人和我想法一样 |
我认为 defineAsyncComponent 是一个很好的方法，还能设置超时和错误页面，是一个低成本的实现，所以我浪费了几个小时搜索相关问题之后还是觉得继续使用这个方法。 |
没必要生气，你看我就回了一句话，实际上我那时候花了两天去找，实在找不到才来github的。 |
今天看了一下源码，发现使用defineAsyncComponent警告的时候会根据一个属性判断是否重复打印，通过这个点可以取消warn的打印，代码如下： function transform_routes_async ( routes: any[] )
{
routes.forEach( item =>
{
if ( item.component ) {
item.component = defineAsyncComponent( {
loader: item.component,
loadingComponent: PageLoading,
delay: 100,
errorComponent: PageError,
timeout: 30000
} );
// 加上这一句就好了
item.component.__warnedDefineAsync = true
}
if ( item.children ) {
transform_routes_async( item.children );
}
} );
}不过在深入使用 vue3 之后我还发现了其他很多的问题，我有一些完美主义的想法，而vue3的某些设计还是欠考虑，对vue官方提的一些 issues 之后得到的反馈也非常失望，后面如果有公司级新项目可能对vue3的倾向就不大了 |
|
define your lazyLoad： import { defineComponent, ref, h, markRaw, type VNode } from 'vue'
export const lazyLoad = (directory: string, fileName: string) =>
defineComponent({
name: fileName,
setup(props) {
const comp = ref<VNode>()
import(`@/views/${directory}/${fileName}.vue`).then((res) => {
comp.value = markRaw<VNode>(res.default)
})
return () => (comp.value ? h(comp.value, props) : h(PageLoading))
}
})in route : import { type RouteRecordRaw } from 'vue-router'
const routers: RouteRecordRaw[] = [{
path: '/login',
name: 'Login',
component: lazyLoad('authenticate', 'Login')
}] |
哈哈，没想到也有和我一模一样的疑问出现，一直在寻找路由懒加载时展示Loading状态，最后自己琢磨了下使用defineAsyncComponent{ loadingComponent } 但又苦于会出现警告😅 |
|
之前的版本我是用的beforeEach和afterEach组合来显示全局Loading状态 |
|
After further digging to understand this "issue", I have found some old docs that shed more light to his answer.
Essentially, vue-router already support async component (they call it lazy loading) with dynamic import so |
It makes sense, I always use dynamic import. I know this mostly happens when the vue page is too large, but we can't ignore the fact that sometimes the users have a poor network. |
|
@Yiximail yes, it'd be nice if vue-router support it natively. Right now you can achieve the same thing with a combination of & in loadingComponent |
|
@Yiximail I have the same issue as you i.e. I want to show a loading component while the vue-router waits for the new lazy loaded route. Actually, with the combination of defineasynccomponent and the loader of suspense it works well. @hviet17 @posva So if it is just a matter of redundancy, is it ok to use defineasynccomponent with route components with the benefit of having a loading state already in place with suspense ? |
|
Turns out, there's a very easy way to have a loading screen while different route components are being downloaded: // App.vue
<script setup>
// imports...
const router = useRouter();
const isLoading =ref(false);
router.beforeEach(() => {
isLoading.value = true;
});
router.afterEach(() => {
isLoading.value = false;
});
</script>
<template>
...
<!-- Main content -->
<LoadingScreen v-if="isLoading" /><!-- LoadingScreen is just another component that you define -->
<router-view v-else v-slot="{ Component }">
<component :is="Component" />
</router-view>
...
</template> |
|
Thanks to anthonyboutinov's comment, I found a good way to add transitions to route components and the loading screen: <script setup>
// imports...
const router = useRouter();
const isLoading =ref(false);
router.beforeEach(() => {
isLoading.value = true;
});
router.afterEach(() => {
isLoading.value = false;
});
</script>
<template>
<RouterView v-slot="{ Component }">
<Transition name="fade" mode="out-in">
<KeepAlive>
<component :is="isLoading ? LoadingScreen : Component" />
</KeepAlive>
</Transition>
</RouterView>
</template>
<style scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
</style> |
What problem does this feature solve?
我阅读过 #627 和 #682 问题。
I've read read about issues #627 and #682.
问题 #627 是关于:
The issue #627 is about:
它没必要使用到
defineAsyncComponent， 所以它应该写成It is not necessary to use
defineAsyncComponent, so it should become我理解并且十分同意这样改变
I understand and fully agree with this change.
但是根据 defineasynccomponent 的文档 和 Async Components，它其实是可以接收其他参数。
However, according to defineasynccomponent API and Async Components. Actually, it can receive other parameters.
所以我认为不应该只要使用了
defineAsyncComponent就弹出警告。So I don't think it should get a warning when use
defineAsyncComponentby receive an object.在我使用场景中，我需要一个加载页来等待下一个页面准备好或者等待依赖的chunk下载好，所以我这样写了。
In my usage scenario. I need a loading page to wait for the next page to be ready. Or just wait for the dependent chunks to download. So I write it like this.
它能够实现我的需求，但是收到了一个来自 #682 修改的警告。
And it works for my needs. But I received a warning from #682 as well.
我不太确定为什么不应该使用
defineAsyncComponent，是我忽略了什么吗？或者使用它会产生什么问题?I'm not sure why should not use
defineAsyncComponent. Is it something I ignored? Or what problems will arise from using it.The text was updated successfully, but these errors were encountered: