目录
一、问题
1.太多地方用到 Aspin了，还要使用h来自己，写style渲染。想着封装一下传值就可以。
2.没想到还搞出问题：线下报错，线上不报错。
3.报错具体如下：
chunk-QEPXSSG5.js?v=da510c8d:7137 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'type')
at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7137:18)
at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)
at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
at unmount (chunk-QEPXSSG5.js?v=da510c8d:7068:9)
at unmountComponent (chunk-QEPXSSG5.js?v=da510c8d:7147:7)
at unmount (chunk-QEPXSSG5.js?v=da510c8d:7048:7)
at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)
at unmountChildren (chunk-QEPXSSG5.js?v=da510c8d:7167:7)
at unmount (chunk-QEPXSSG5.js?v=da510c8d:7076:9)
Promise.then
callAsyncFunc @ useAsyncLoading.ts:17
await in callAsyncFunc
handleCheck @ OnlineInvoice.vue:256
4.报错的地方是 loading.value=false这行代码,大致意思是组件没有正常卸载。但是我也没有写啥呀。就很常见的逻辑：调接口前loading,调完接口后取消loading而已。
5.具体代码如下：
6.我推测的错误原因：
1)Asteps异步，还没有加载完。但是吧，Asteps完全就是一个样式，和逻辑没有啥关系
2)handleNext影响逻辑，去除，也没有用
3)DeepSeek问了一下，它说可能是CommonDrawer控制显示的isShowModal没有正确执行。试了一直显示也没有用
4)真是奇了怪呀，我啥也没写呀，看着没有问题呀。
二、原因及解决方法
1.问了一下大佬，然后说CommonLoading有问题，我也是蒙圈了。设想了十几种可能性，都是在错误的道路上无效努力。
2.具体代码如下：乍一看，好像没有毛病呀。但是吧，把他注释了还真不报错了。
<template>
<!-- 加载中 -->
<ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'
const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {
fontSize: 12,
color: '#B3B3B3',
fontWeight: 'bold'
})
const indicator = computed(() => {
const icon = props.svg ?? Loading3QuartersOutlined
return h(icon, {
style: {
fontSize: `${props.fontSize}px`,
fontWeight: props.fontWeight,
color: props.color
},
spin: true
})
})
</script>
3.搞不懂，commonLoading是基于ASpin写的，去看看官网怎么写的，结果去官网看了。总结就是直接赋值
4.那我不用computed直接赋值是不是也可以呢？试了一下，还真可以
<template>
<!-- 加载中 -->
<ASpin :indicator="indicator"></ASpin>
</template>
<script lang="ts" setup>
import { Loading3QuartersOutlined } from '@ant-design/icons-vue'
const props = withDefaults(defineProps<{ fontSize?: number; svg?: any; color?: string; fontWeight?: string }>(), {
fontSize: 12,
color: '#B3B3B3',
fontWeight: 'bold'
})
const indicator = ref()
function initIndicator() {
const icon = props.svg ?? Loading3QuartersOutlined
indicator.value = h(icon, {
style: {
fontSize: `${props.fontSize}px`,
fontWeight: props.fontWeight,
color: props.color
},
spin: true
})
}
initIndicator()
</script>
5. 但是我真的不了解呀，为啥用 computed就无法正常卸载。DeepSeek还让我自己写动画来着，然后并没有用。用computed必定会报错@~~@,看不懂
三、总结
1. 遇到报错 组件没有正常卸载 unmountComponent，Cannot read properties of null (reading 'insertBefore')时，定位到具体的代码，要着重看 报错行包裹的代码！！！
不要像我一样，疏忽大意，只想着外面的代码有问题🤣
2.现确认自己的逻辑是否有问题
3.如果确认自己的逻辑没有问题。需要着重注意 二次封装的第三方组件有没有问题。尝试注释排除法找到具体的错误位置，再到官网找到具体的例子照着写。
4.不过我是真搞不懂为啥 computed会导致Aspin组件无法正常卸载。有大佬知道，欢迎评论，谢谢！
/*
希望对你有帮助！
如有错误，欢迎指正！
*/